日期范围选择器限制只能选今天之前的时间,或者只能选今天之后的时间
<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}}}
效果图:
重点:这句代码是写在data里面的,不是methods里的
vue element 日期范围选择器限制只能选今天之前的时间 或者只能选今天之后的时间 或只能选取今天往后三天内