<template>
<DatePicker type="date" :options="options" placeholder="Select date" style="width: 200px"></DatePicker>
</template>
<script>
export default {
data () {
return {
options: {
disabledDate (date) {
const disabledDay = date.getDate();
return disabledDay === 15;
}
}
}
}
}
</script>
iview官网的代码是这样的
options写入方法:disabledDate ,参数date获取的是日期选择器当前界面的所有日期,如:date是指从2020-08-30至2020-10-10,date改变,disabledDate 函数就执行,第一次执行disabledDate 传入的date值为new Date(2020, 8, 30),最后一次执行disabledDate 传入的date值为new Date(2020, 10, 10)
此处完成了最近三天可选,其他日期都不可选
options: {
disabledDate(date) {
// 获取选择面板每一个日期的时间戳
const time = date.getTime();
// 获取当前时间戳
const curTime = new Date().getTime();
// 获取三天前的时间戳
const startDate = curTime - (3 * 3600 * 24 * 1000);
// 当日期选择面板的日期小于startDate ,或者大于curTime 时,返回true,返回true则不可选
if (time < startDate || time > curTime) {
return true
}
},
}
感觉写得语言表达得好像不太好ε=(´ο`*))