Element Ui 日期选择器 范围限制 + value-format

Element Ui 日期选择器 范围限制

一个日期范围

 

// el-date-picker
<el-date-picker
       v-model="value"
       type="date" 
       placeholder="选择日期"
       :picker-options="pickerOptions"> //
</el-date-picker>

    // 选择 今天或以后的日期(不包含今天则去掉下面 - 8.64e7）
    pickerOptions: {
         disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
       },  
    // 选择 今天或以前的日期(不包含今天则去掉下面 - 8.64e6）
    pickerOptions: {
         disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;
          }
       }

 

两个日期范围

 

<el-date-picker
       v-model="value1"
       type="date"
       placeholder="开始日期"
       :picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
       v-model="value2"
       type="date"
       placeholder="结束日期"
       :picker-options="pickerOptions1">
</el-date-picker>

// 结束日期不能大于开始日期,可以为今天
// 注: 结束时间最大只能为今天，开始时间只能小于或等于结束时间，
// 如果开始时间为今天，结束时间只能为今天
  pickerOptions0: {
     disabledDate: (time) => {
       if (this.value2) {
         return time.getTime() > Date.now() || time.getTime() > this.value2;
       } else {
            return time.getTime() > Date.now();
        }
      }
   },
   pickerOptions1: {
      disabledDate: (time) => {
         return time.getTime() < this.value1 || time.getTime() > Date.now();
      }
   }
  // 在我们项目中用的最多的是这种
  // 结束日期不能大于开始日期,可以为今天
  // 先开始时间，判断为今天或以前，在结束时间，则结束时间大于等于开始时间
  // 先结束时间，判断为今天或以后，在开始时间，则开始时间小于等于结束时间
  pickerOptions0: {
        disabledDate: (time) => {
            if (this.value2) {
              return time.getTime() > this.value2
            } else {
              return time.getTime() > Date.now()
            }
          }
        },
  pickerOptions1: {
        disabledDate: (time) => {
            if (this.value2) {
              return time.getTime() < this.value1
            }
            return time.getTime() < Date.now()
          }
        }

 

value-format

 

value-format属性是改变v-model上值的格式
value-format="yyyy-MM-dd" //2018-12-27
value-format="yyyy-MM-dd HH:mm:ss" //2018-12-27 00:00:00
value-format="timestamp" // 1483326245000
我们最后获取的值都是要传给后台的，所以，我们需要value-format这个属性
假如后台需要的是是 2018-12-27 格式
添加 value-format="yyyy-MM-dd"
会发现验证里加了v-model值的验证都无效了
其实很好解决，判断的依据是13位的时间戳，所以我们需要把验证里的v-model的值替换成13时间戳就可以了.当然你也可以改为 value-format=“timestamp” 也行（这需要考虑之后传值的转换）

在这推荐一个插件 moment，一个操作时间的插件，有兴趣可以去了解一下