Vue3+element-plus日期选择器 el-date-picker 设置可选最小时间方法
vue3项目中使用了element-plus日期选择器 el-date-picker,要求设置最小可选时间
可以使用 el-date-picker 的 disabled-date 属性,
给其绑定一个 方法- - -disabledDateFun,:disabled-date=“disabledDateFun”
绑定的方法可以接收到该日期选择器的选择时间面板的时间对象- - - time,
绑定的方法返回值为 Boolean 值,true - - -代表日期禁止选择,false- - -日期可以选择
假设最小可选时间为 2012-01-01
可以比较 日期选择器上的时间 - - - time 和 2012-01-01 两者大小,time > 2012-01-01 00:00:00 则可选,
实现方法:
比较 日期选择器上的时间 - - - time 和 2012-01-01 两者时间戳, 日期越晚,时间戳越大
time.getTime() < new Date(‘2012-01-01 00:00:00’).getTime() , disabledDateFun 返回 true,不可选
否则,返回 false,可选
element-plus 中文文档地址:
https://element-plus.gitee.io/zh-CN/component/date-picker.html#%E5%B1%9E%E6%80%A7
使用示例:
html 模板中使用 el-date-picker 日期选择器
<el-date-picker
v-model="timeValue"
type="daterange"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY.MM.DD"
value-format="YYYYMMDD"
:disabled-date="disabledDateFun"
/>
v-model=“timeValue”- - -绑定选择的时间值
type=“daterange”- - -选择时间范围,时间范围 xx — xx
format=“YYYY.MM.DD”- - -选择器中展示的 日期格式
value-format=“YYYYMMDD”- - -选择的时间的值的格式
vue3 中 setup() {} 中 创建 disabledDateFun 方法 并返回:
setup() {
// 时间选择
const timeValue = ref('');
// 时间范围设置
const disabledDateFun = (time: Record<string, any>): boolean => {
if (time.getTime() < new Date('2012-01-01 00:00:00').getTime()) {
return true;
} else {
return false;
}
};
return {
timeValue,
disabledDateFun,
}
}
getTime() - - -获取日期时间戳
如果要设置 时间可选范围- - - 大于多少时间 ,小于多少时间 ,依次类推
更多推荐
所有评论(0)