当前位置：首页 > news >正文

elementplus 使用日期时间选择器，设置可选范围为前后大于2年且只能选择历史时间不能大于当前时间点

news 2025/3/14 4:28:10

需求：时间选择器可选的时间范围进行限制，-2年<a<2年且a<new Date().getTime()
核心：这里需要注意plus版没有picker-options换成disabled-date属性了，使用了visible-change和calendar-change属性
逻辑：另设一个参数记录第一个点击的时间点，根据这个时间点设置时间范围，使用visible-change和calendar-change属性来进行第一个时间点的记录和清空
代码环境：vue3 elementplus ts
效果
当前时间为25-2-10，且没有进行第一位的时间选择所以仅大于该日期的不能选择
选择了第一位时间24-2-6，所以可选时间范围为小于该值2年内或者大于该值2年内且小于当前时间25-2-10的值，如下方几张图所示
- 小于22年2月6号的不能选
- 大于26-2-6的且大于25-2-10的不能选(我这个24年选的不太好，应该选22年就能展示了但是不想截图了哈哈，应该能理解我的意思吧）
代码

// h5
<el-date-pickerv-model="rightTime"type="datetimerange"range-separator="-"start-placeholder="开始时间"end-placeholder="结束时间":disabled-date="disabledDate"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"@visible-change="onvisibleChange"@calendar-change="oncalendarChange"/>// js 
const rightTime = ref([])
const chooseDay= ref(null) // 记录第一个点击的时间点const onvisibleChange = (val)=>{if(val){chooseDay.value = null}
}
const oncalendarChange = (val)=>{const [chooseFirstDate] = valchooseDay.value = new Date(chooseFirstDate)}const disabledDate = (time: Date) => { // 返回true就禁用const now = new Date(); // 当前时间if (!chooseDay.value) { // 选择的第一个日期不存在时的情况// return false  // 选择的第一个日期不存在时可任意选择开始日期return time.getTime() > now.getTime()  // 不能选择比当前时间点打的时间（只能选择历史时间）}else{ // 当点击第一个时间点后，可选时间范围为，大于a时间点2年内的或者小于a时间点2年内的const twoYearsAgoMin = new Date(chooseDay.value.getFullYear() - 2, chooseDay.value.getMonth(), chooseDay.value.getDate());const twoYearsAgoMax = new Date(chooseDay.value.getFullYear() + 2, chooseDay.value.getMonth(), chooseDay.value.getDate());return time.getTime() > now.getTime() || time.getTime() < twoYearsAgoMin || time.getTime() > twoYearsAgoMax }}