Element Ui 日期控件如何限定可选择日期范围

Element Ui 日期控件如何限定可选择日期范围

常用的几种限制日期的使用情景：

一、首选是单个日期选择框：

组件代码如下：

注意：pickerOptions这个要写到data()里

情景1: 设置选择今天以及今天之前的日期

data () {return {pickeroptions: {disabledDate (time) {return time.getTime() > Date.now() - 8.64e6}}}
}

情景2：设置选择今天以及今天以后的日期

data () {return {pickeroptions: {disabledDate (time) {return time.getTime() < Date.now() - 8.64e7}}}
}

情景3：设置选择今天之前的日期(不包含今天）

data () {return {pickerOptions: {disabledDate (time) {return time.getTime() > Date.now() - 8.64e7}}}
}

情景4：设置选择今天之后的日期（不包含今天）

data () {return {pickeroptions: {disabledDate (time) {return time.getTime() < Date.now() - 8.64e6}}}
}

情景5：设置选择三个月之前到今天的日期（含当天）（可灵活设置前多久的日期到今天日期，修改函数里three数据即可实现。90代表90天，更换可灵活设置区间）

data (){return {pickerOptions: {disabledDate(time) {let curDate = (new Date()).getTime();let three = 90 * 24 * 3600 * 1000;let threeMonths = curDate - three;return time.getTime() > Date.now() - 8.64e6 || time.getTime() < threeMonths;}},  }     
}

情景6：设置选择三个月之前到今天的日期（不含当天）（可灵活设置前多久的日期到今天日期，修改函数里three数据即可实现。90代表90天，更换可灵活设置区间）

data (){return {pickerOptions: {disabledDate(time) {let curDate = (new Date()).getTime();let three = 90 * 24 * 3600 * 1000;let threeMonths = curDate - three;return time.getTime() > Date.now() - 8.64e7 || time.getTime() < threeMonths;}},  }     
}

二、可选两个日期的组件

情景7：选择日期区间为今天和今天之前的日期。（直接参考情景1，直接按照单一输入框即可判断。代码如下。参考前面单选框情景可实现第一类型中的所有情景，代码一致即可。后续代码不赘述了。）

data () {return {pickeroptions: {disabledDate (time) {return time.getTime() > Date.now() - 8.64e6}}}
}

注意：type="daterange"类型的直接按照单一的输入框为准就行。只不过初始化绑定字段由字符串变为数组形式即可。

三、两个输入框，两个组件拼接。type="date"类型。

情景8：限制结束日期不能早于开始日期

data(){return {pickerOptions0: {disabledDate: (time) => {if (this.value2 != "") {return time.getTime() > Date.now() || time.getTime() > this.value2;} else {return time.getTime() > Date.now();}}},pickerOptions1: {disabledDate: (time) => {return time.getTime() < this.value1 || time.getTime() > Date.now();}},}      
}

希望对小伙伴们的开发有帮助，喜欢的话可以收藏一下哦。一起加油吧！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！