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() - - -获取日期时间戳

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

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐