1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue element 日期范围选择器限制只能选今天之前的时间 或者只能选今天之后的时间

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

时间:2023-12-14 19:49:53

相关推荐

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

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

<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 日期范围选择器限制只能选今天之前的时间 或者只能选今天之后的时间 或只能选取今天往后三天内

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。