功能需求

時間范圍選擇器，最大時間選擇尺度為一個月。

今天是 2025-01-09

示例1

選擇 2025-01-02 日
禁用未來日期（2025-01-09之后日期）
禁用上月2號（31日之前）之前的日期

示例2

選擇2024-12-02
禁用31日之前日期
禁用31日之后日期

代碼 Vue2

<template><el-date-pickerv-model="dates"type="datetimerange"range-separator="至"start-placeholder="開始日期"end-placeholder="結(jié)束日期":picker-options="pickerOptions"></el-date-picker>
</template><script>
export default {data() {return {dates: [],currentTime: '',pickerOptions: {onPick: ({minDate, maxDate}) => {if (maxDate) {this.currentTime = ''return}this.currentTime = minDate.getTime()},disabledDate: (time) => {const now = new Date()// 禁用當前時間之后的時間if (time.getTime() > now) return true// 禁用今天23:59:59 之后的時間；如果沒有時、分、秒選擇器，則不需要對時分秒進行特殊處理// if (time.getTime() > new Date(now.toLocaleDateString() + ' 23:59:59')) return trueconst limitDays = 31 * 24 * 3600 * 1000const minTime = this.currentTime - limitDaysconst maxTime = this.currentTime + limitDays// 禁用一月之前的時間if (time.getTime() < minTime) return true// 禁用一月之后 ｜｜ 當前時間今天之后的時間// 添加this.currentTime判斷： 如果未選擇開始日期 或者 選擇了結(jié)束時間時 this.currentTime 是 空的，if (this.currentTime && time.getTime() > maxTime) return truereturn false}}};},methods: {checkDisabled(date) {// 檢查是否超過當前日期一個月const oneMonthLater = new Date(this.currentDate);oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);if (date >= oneMonthLater) {this.disabledDays.push(date);}},},watch: {dates(newDates) {// 當日期范圍改變時，更新禁用日期和當前日期this.currentDate = newDates[1];this.checkDisabled(newDates[0]);this.checkDisabled(newDates[1]);// 清空已禁用的未來日期this.disabledDays = [];for (let date of this.dates) {this.checkDisabled(date);}},},
};
</script>