日期选择器之picker-options设置
<el-date-picker
v-model="dateChoose"
clearable
type="date"
format="yyyyMMdd"
value-format="yyyyMMdd"
:editable="false"
:picker-options="pickerOptions"
class="w100">
</el-date-picker>
1、只允许选择当月的日期
this.month = "2023-01",
pickerOptions: {
disabledDate: (time) => {
if (this.month) {
let _t = new Date(this.month),
_f = new Date(_t.getFullYear(),_t.getMonth()+1, 1).getDate(),
_l = new Date(_t.getFullYear(),_t.getMonth()+1, 0).getDate();
const firstTime = new Date(this.month+'-'+_f).getTime();
const lastTime = new Date(this.month+'-'+_l).getTime();
return time.getTime() < firstTime || time.getTime() > lastTime
}
}
},
2、只允许选择today往后的日期,不含当天
pickerOptions: {
disabledDate: (time) => {
let _t = new Date().getTime();
return time.getTime() < _t; // time.getTime() < Date.now()
}
},
3、只允许选择today往前的日期,含当天
pickerOptions: {
disabledDate: (time) => {
let _t = new Date().getTime();
return time.getTime() > _t
}
},
4、只允许选择当前日期往前2周,today-14,含当天
pickerOptions: {
disabledDate: (time) => {
let _t = new Date().getTime();
let prev = new Date(new Date(_t).getTime() - (14 * 24 * 3600 * 1000)).getTime();
return time.getTime() > _t || time.getTime() < prev;
}
},
5、只能选择3年前的日期
pickerOptions: {
disabledDate: (time) => {
let _t = new Date().getTime();
let three = _t - (1000 * 3600 * 24 * 365 * 3);
return time.getTime() > three;
}
},
6、只能选择3年后的日期
pickerOptions: {
disabledDate: (time) => {
let _t = new Date().getTime();
let three = _t + (1000 * 3600 * 24 * 365 * 3);
return time.getTime() < three;
}
},
7、选择区间在[当前日期往前一年,当前日期往后一年]
pickerOptions: {
disabledDate: (time) => {
let _t = new Date().getTime();
let prevY = _t - (1000 * 3600 * 24 * 365 * 1);
let nextY = _t + (1000 * 3600 * 24 * 365 * 1)
return time.getTime() < prevY || time.getTime() > nextY;
}
},
8、选择区间在[当前年1月1号,当前年12月31号]
pickerOptions1: {
disabledDate: (time) => {
let _t = new Date();
let _f = new Date(_t.getFullYear(),0, 1).getTime();
let _l = new Date(_t.getFullYear(),12, 0).getTime();
return time.getTime() < _f || time.getTime() > _l;
}
},
9、在指定区间内选择,如["2023-03-01","2023-04-18"],含后不含前
pickerOptions: {
disabledDate: (time) => {
let _f = new Date("2023-03-01").getTime();
let _l = new Date("2023-04-18").getTime();
return time.getTime() < _f || time.getTime() > _l
}
},
10、限制在一个月之内
pickerOptions: {
disabledDate: (time) => {
let one = 30*24*3600*1000, today = new Date().getTime();
let _p = today - one;
let _n = today + one;
return time.getTime() < _p || time.getTime() > _n
}
},
11、禁止选择周末
pickerOptions: {
disabledDate: (time) => {
return time.getDay() === 6 || time.getDay() === 0;
}
},
年份选择器之picker-options设置
<el-date-picker
v-model="yearChoose"
clearable
type="year"
:editable="false"
:picker-options="pickerOptions"
class="w100">
</el-date-picker>
1、指定年份禁选,如['2022','2023','2024']
pickerOptions: {
disabledDate: (time) => {
let _y = ['2022','2023','2024']
let y = new Date(time).getFullYear();
return _y.includes(y)
}
},
月份选择器之picker-options设置
<el-date-picker
v-model="monthChoose"
clearable
type="month"
:editable="false"
:picker-options="pickerOptions"
class="w100">
</el-date-picker>
1、指定月份禁选,如[1月,2月,3月]
pickerOptions: {
disabledDate: (time) => {
let _m = [0, 1, 2]
let m = new Date(time).getMonth();
return _m.includes(m)
}
},
2、当前月往后
pickerOptions: {
disabledDate: (time) => {
let _m = new Date().getMonth();
return time.getMonth() > _m;
}
},
3、当前月往前
pickerOptions: {
disabledDate: (time) => {
let _m = new Date().getMonth();
return time.getMonth() < _m;
}
},