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事件冲突导致日期都不可选 ,这里根据自身业务具体情况具体分析。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值