标签:moment return 选择 font val disable time() 判断 后台
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,一个操作时间的插件,有兴趣可以去了解一下
Element Ui 日期选择器 范围限制 + value-format
标签:moment return 选择 font val disable time() 判断 后台
原文地址:https://www.cnblogs.com/home-/p/11791351.html