1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > ElementUI日期选择器DatePicker限制所选时间范围(例如限制前后时长不超一个月)的实现

ElementUI日期选择器DatePicker限制所选时间范围(例如限制前后时长不超一个月)的实现

时间:2023-02-21 18:44:06

相关推荐

ElementUI日期选择器DatePicker限制所选时间范围(例如限制前后时长不超一个月)的实现

具体效果如下:

未选择时间时,最初选择时间不能超过今天

选择初始时间后,第二个选择的时间前后不能超过初始时间的一个月。且此时下拉框变成禁用状态。

例如:点击7月15日后,在8月14日往后的日期全部禁止选中

7月15日前一个月的6月15日之前的日期也全部禁止选中

选好起始时间和结束时间后,下拉框与所有禁止选用的日期限制全部放开,以供下一轮的正常选择

实现方法

组件demo:

<el-date-pickerv-model.trim="searchDate":picker-options="pickerOptions"type="datetimerange"size="small"range-separator="~"start-placeholder="开始日期"end-placeholder="结束日期"value-format="yyyy-MM-dd HH:mm"> </el-date-picker>

js:

data(){return {selectData: '', // 记录初始点击DatePicker日期选择器的时间pickerOptions: {// onPick:选中日期后会执行的回调。写成箭头函数否则this.selectData会报错// 点击时,选择的是初始时间,也就是minDateonPick: ({maxDate, minDate }) => {this.selectData = minDate.getTime();if (maxDate) {// 第二次点击日期选择器,选好初始时间和结束时间后,解除禁用限制this.selectData = ''}},// 设置禁用状态,参数为当前日期,要求返回 Boolean。同理写成箭头函数disabledDate: (time) => {// 是否限制的判断条件,if里写点击了初始时间后的判断条件// 即第二个选择的时间前后不能超过初始时间的一个月if (this.selectData) {return time.getTime() > new Date() || time.getTime() > this.selectData + 30 * 24 * 3600 * 1000 || time.getTime() < this.selectData - 30 * 24 * 3600 * 1000;// time.getTime() > new Date() 为所选时间不能超过今日// 30 * 24 * 3600 * 1000则为一个月的毫秒数,根据自己的需求修改限制的时间范围} else {return time.getTime() > new Date();// 如果不需要限制所选时间不能超过今日,则直接return false即可}},},}}

完工~THX!

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