日期范围选择器限制只能选今天之前的时间,只能选今天之后的时间,只能选取今天往后三天内,只能选取选中时间的一个月内的时间,只能选择除今天及今天之前的、周六日、美国节假日之外的时间,只能选当前时间之前的前三天以及之后的时间
<el-date-picker
v-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 - 1
return time.getTime() < Date.now() - 8.64e7 || time.getTime() > times// 如果没有后面的-8.64e7就是不可以选择今天的
}
}
}
}
效果图:
4.只能选取选中时间的一个月内的时间(eg:如果我初始时间选中是2023.4.14,那么我的终止时间只能在2023.3.14和2023.5.15区间里面选中)
data() {
return {
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 * 1000
const minTime = this.selectDate - one
const maxTime = this.selectDate + one
return 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;
},
}
效果图:
6.只能选当天时间之前的前三天以及之后的时间
data() {
return {
expireTimeOPtion:{
disabledDate(time){
const currentDate = new Date();
const threeDaysAgo = new Date(currentDate);
threeDaysAgo.setDate(currentDate.getDate() - 4);
return time.getTime() < threeDaysAgo.getTime();
}
}
}
}
效果图:
重点:expireTimeOPtion代码是写在data里面的,不是methods里的
以上几种情况是我在实际项目中遇到的然后总结出来的(以后如有遇到新的时间限制,会继续补充),以上代码如有不准确、更好的解决方法或者其他情况的时间限制欢迎在评论区讨论,共同进步