黑色风格的软件公司网站html5+css3模板搜索推广公司

功能需求

时间范围选择器，最大时间选择尺度为一个月。

今天是 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="结束日期":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判断： 如果未选择开始日期 或者 选择了结束时间时 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>