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，一个操作时间的插件，有兴趣可以去了解一下