vue element 日期范围选择器限制只能选今天之前的时间，只能选今天之后的时间，只能选取今天往后三天内，只能选取选中时间的一个月内的时间，只能选择除今天及今天之前的、周六日、美国节假日的时间

日期范围选择器限制只能选今天之前的时间，或者只能选今天之后的时间

重点：:picker-options="expireTimeOPtion"

1.只能选今天或者今天之后的时间

data() {return {expireTimeOPtion: {disabledDate(time) {return time.getTime() < Date.now() - 8.64e7;  //如果没有后面的-8.64e7就是不可以选择今天的 }},}
}

效果图：

2.今天以及今天之前的日期

data() {return {expireTimeOPtion: {disabledDate(time) {return time.getTime() > Date.now() - 8.64e6;  //如果没有后面的-8.64e6就是不可以选择今天的 }},}

效果图： 

3.只能选取今天往后三天内

data() {return {expireTimeOPtime: {disabledDate(time) {const times = new Date(new Date().toLocaleDateString()).getTime() + 3 * 8.64e7 - 1return time.getTime() < Date.now() - 8.64e7 || time.getTime() > times// 如果没有后面的-8.64e7就是不可以选择今天的}}}
}

效果图：

 4.只能选取选中时间的一个月内的时间（eg:如果我初始时间选中是2023.4.14,那么我的终止时间只能在2023.3.14和2023.5.15区间里面选中）

 selectDate: '',//判断标记，minDate 起始时间，maxDate终止时间，如果没有选择终止时间，就有一个时间限制，如果选择了，时间限制就解除了。expireTimeOPtion: {onPick: ({ minDate,maxDate }) => { //minDate起始时间,maxDate终止时间this.selectDate = minDate.getTime()if (maxDate) {this.selectDate = ''}},disabledDate: (time) => {if (this.selectDate !== '') {const one = 30 * 24 * 3600 * 1000const minTime = this.selectDate - oneconst maxTime = this.selectDate + onereturn time.getTime() < minTime || time.getTime() > maxTime}}}

效果图：

 5.只能选择除今天及今天之前的、周六日、美国节假日之外的时间

data() {return {expireTimeOPtion: {disabledDate: time => {// 判断是否为周六或周日if (time.getDay() === 6 || time.getDay() === 0) {return true;}// 判断是否为当前时间之前if (time.getTime() < Date.now()) {return true;}// 判断是否为美国节假日if (this.isUsHoliday(time)) {return true;}return false;}}},
methods:{isUsHoliday(time) {// 获取日期const date = time.getDate();// 获取月份（注意月份是从0开始的）const month = time.getMonth();// 获取年份const year = time.getFullYear();// 判断是否为美国节假日// New Year's Day（元旦）if (month === 0 && date === 1) {return true;}// Martin Luther King Jr. Day（马丁·路德·金纪念日）- 一月的第三个星期一if (month === 0 && time.getDay() === 1 && date > 14 && date <= 21) {return true;}// Presidents' Day（总统日）- 二月的第三个星期一if (month === 1 && time.getDay() === 1 && date > 14 && date <= 21) {return true;}// Memorial Day（阵亡将士纪念日） - 五月的最后一个星期一if (month === 4 && time.getDay() === 1 && date > 24) {return true;}// Independence Day（独立日） - 7月4日if (month === 6 && date === 4) {return true;}// Labor Day（劳动节） - 九月的第一个星期一if (month === 8 && time.getDay() === 1 && date <= 7) {return true;}// Columbus Day（哥伦布日） - 10月的第二个星期一if (month === 9 && time.getDay() === 1 && date > 7 && date <= 14) {return true;}// Veterans Day（退伍军人日） - 11月11日if (month === 10 && date === 11) {return true;}// Thanksgiving Day（感恩节） - 11月的第四个星期四if (month === 10 && time.getDay() === 4 && date > 21 && date <= 28) {return true;}// Christmas Day（圣诞节） - 12月25日if (month === 11 && date === 25) {return true;}return false;},
}

效果图：

 重点：expireTimeOPtion代码是写在data里面的，不是methods里的

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！