el-date-picker 时间日期格式,选择范围限制

  el-date-picker 使用时,有时候想要限制用户选择的访问,但是用的是datetimerange类型的选择器,不想单独写两个起始的选择器。我发现网上的方案大部分都是单独写两个,个别datetimerange的选择器说的也不是很清楚,也有一些bug,这里贴出我的解决办法

  使用picker-options属性的disabledDate去控制范围。返回true代表禁止,就无法点击选择器的确认按钮。

<el-date-picker
     :picker-options="pickerOptions"
      size="medium"
      v-model="searchTime"
      value-format="yyyy-MM-dd HH:mm:ss"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
></el-date-picker>
data() {
    return {
      maxDate: null,
      minDate: null,
      pickerOptions: {
     // 当我们选择日期时的回调方法。返回两个日期的最大值和最小值,第一次返回一个值,第二次返回两个值 onPick: ({ maxDate, minDate }) => {
      //当我们选择两个值的时候,就认为用户已经选择完毕 if (maxDate != null && minDate != null) { this.maxDate = maxDate; this.minDate = minDate; } }, disabledDate: time => { let maxDate = this.maxDate; let minDate = this.minDate; if (maxDate != null && minDate != null) { let days = maxDate.getTime() - minDate.getTime();
       //计算完之后必须清除,否则选择器一直处于禁止选择的状态 this.maxDate = null; this.minDate = null; return parseInt(days / (1000 * 60 * 60 * 24)) > 30; } else { //设置当前时间后的时间不可选 return time.getTime() > Date.now(); } } } }; },

当我们选择的范围超过30天时,确认按钮无法点击

 当小于或等于30天时,可以确认

原文地址:https://www.cnblogs.com/lwjQAQ/p/12856155.html