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"
/>
1
2
3
4
5
6
7
8
9

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,
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

getTime() - - -获取日期时间戳

如果要设置 时间可选范围- - - 大于多少时间 ，小于多少时间 ，依次类推