elementui日期组件自定义日期选项picker-options-Toy模板网

这篇具有很好参考价值的文章主要介绍了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事件冲突导致日期都不可选，这里根据自身业务具体情况具体分析。文章来源地址https://www.toymoban.com/news/detail-643424.html

到了这里，关于elementui日期组件自定义日期选项picker-options的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！