elementui日期组件自定义日期选项picker-options

 1、背景:日期组件根据当前选中的日期值,要求只能选择当前日期前后三个月的日期,并且支持快捷选项。html代码如下:

<el-date-picker
      v-model="value2"
      type="daterange"
      value-format="yyyyMMdd"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>

2、方案 :在pickeroptions中根据当前的日期配置disabledData属性:

选择一个日期后作为结束日期或者起始日期记录下来,点击事件触发options中的onpick函数,在回调函数中有两个参数,一个偏大日期值一个偏小日期值;记录下之后根据业务要求区间定义pickerRange,这里设置三个月,只能选择该日期前后三个月;

pickerMinDate:null,
pickerRange:3600*1000*24*90,
pickerOptions: {
   onPick:({maxDate,minDate})=>{
      if(minDate && _this.pickerMinDate){
         _this.pickerMinDate = null;
      }else if(minDate){
         _this.pickerMinDate = minDate.getTime();
      }
   },
   disabledDate:(time) =>{
     if(_this.pickerMinDate){
       return (time.getTime() > (_this.pickerMinDate + _this.pickerRange));
     }
     return false;
   },
    shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
},

3、注意:快捷键可能会跟自定义onpick事件冲突导致日期都不可选 ,这里根据自身业务具体情况具体分析。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>