日期范围选择器限制只能选今天之前的时间，或者只能选今天之后的时间
<el-date-pickerv-model="time"value-format="yyyy-MM-dd HH:mm:ss":default-time="['00:00:00', '23:59:59']"style="width: 400px"type="datetimerange"clearable:picker-options="expireTimeOPtion"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker>
重点：: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:如果我初始时间选中是.4.14,那么我的终止时间只能在.3.14和.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里的
vue element 日期范围选择器限制只能选今天之前的时间 只能选今天之后的时间 只能选取今天往后三天内 只能选取选中时间的一个月内的时间 只能选择除今天及今天之前的 周六日 美国节假日的时间
