el-DatePicker禁选指定日期之前的时间
el-DatePicker禁选指定日期在项目中我们需要日期控件禁用一个指定日期之前的时间,这个时间点是一个变量时,我们应该怎么做呢?在这里用到的是vue的写法。<el-date-pickerv-model="scope.row.interviewDate":clearable="false":picker-options="pickerOptions":editable="false"val
·
el-DatePicker禁选指定日期
在项目中我们需要日期控件禁用一个指定日期之前的时间
,这个时间点是一个变量
时,我们应该怎么做呢?在这里用到的是vue的写法。
<el-date-picker
v-model="scope.row.interviewDate"
:clearable="false"
:picker-options="pickerOptions"
:editable="false"
value-format="yyyy-MM-dd"
style="width: 150px"
/>
不要把pickerOption写在return中
computed: {
pickerOptions({ $props }) {
return {
disabledDate(time) {
const date1 = new Date($props.selectableDate);
const date2 = new Date(new Date().getFullYear() + '-' + ('0' + (new Date().getMonth() + 1)).substr(-2) + '-' + ('0' + (new Date().getDate())).substr(-2));
const diff = (date2 - date1) + 60 * 60 * 24 * 1000;
return (time.getTime() < Date.now() - diff) || (Date.now() < time.getTime());
}
};
}
},
- 其中
selectableDate
是变量,格式是2021-12-31
之类的 - 其中
date2
指的是现在的时间,substr(-2)
是给月,日大小不足10的补零,得到如2021-01-01
之类的标准值。 const diff = (date2 - date1) + 60 * 60 * 24 * 1000;
是为了在差值上加一天,如果变量是2021-03-01
,那么效果是从2021-02-28
开始往前禁选的。
效果图
更多推荐
已为社区贡献1条内容
所有评论(0)