vue element el-date-picker picker-options实现特定日期范围内可选择disabledDate
官方文档给出的示例:<el-date-pickerv-model="value2"align="right"type="date"placeholder="选择日期":picker-options="pickerOptions"></el-date-picker>这是禁用当天之后的时间不可选择(disabledDate中,time.getTime() 的范围是禁用的时间范围
·
官方文档给出的示例:
<el-date-picker
v-model="value2"
align="right"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions">
</el-date-picker>
这是禁用当天之后的时间不可选择(disabledDate中,time.getTime() 的范围是禁用的时间范围)
export default {
data() {
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
}
}
}
}
}
如果想要特定的时间内可以选择,其他不可选择,例如:timeOne(最早时间)、timeTwo(最晚时间)
export default {
data() {
return {
pickerOptions: {
disabledDate: (time) => {
return time.getTime() < new Date(this.timeOne).getTime()-8.64e7 || time.getTime() > new Date(this.timeTwo).getTime()
}
}
}
}
}
如果timeOne:2021-01-21、timeTwo:2021-02-21,那么这个就只有2021-01-21~2021-02-21范围内的日期可以选择。
如果有些逻辑在data里处理不了 想在methods处理:
methods:
disabledDate(time) {
if (this.title === 'new') {
return time.getTime() < Date.now() + 8.64e7 * 3;
} else {
return time.getTime() < new Date(this.planForm.timevalue[0]).getTime() - 8.64e7;
}
},
在html里
<el-date-picker
type="daterange" format="yyyy-MM-dd"
range-separator="至" start-placeholder="开始日期"
value-format="yyyy-MM-dd"
end-placeholder="结束日期"
:picker-options="{disabledDate}">
</el-date-picker>
或者
data:
pickerOptions: {
disabledDate: this.disabledGetTime
}
methods:
disabledGetTime(time) {
return time.getTime() < Date.now() - 8.64e7 ||
time.getTime() > new Date(this.uptimed).getTime() - 8.64e7
},
禁止周六周日
disabledDate(time) {
return (
[0,6].includes(time.getDay())
);
},
更多推荐
已为社区贡献3条内容
所有评论(0)