一铐懊、官方文檔示例:
<el-date-picker
v-model="value2"
align="right"
type="date"
placeholder="選擇日期"
:picker-options="pickerOptions">
</el-date-picker>
二瞎疼、 這是禁用當(dāng)天之后的時(shí)間不可選擇(disabledDate中,time.getTime() 的范圍是禁用的時(shí)間范圍)
export default {
data() {
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
}
}
}
}
}
三贼急、如果想要特定的時(shí)間內(nèi)可以選擇,其他不可選擇空闲,例如:timeOne(最早時(shí)間)走敌、timeTwo(最晚時(shí)間)
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跌榔,那么這個(gè)就只有2021-01-21~2021-02-21范圍內(nèi)的日期可以選擇捶障。
四僧须、如果有些邏輯在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="結(jié)束日期"
: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())
);
},