1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > element-ui 日期选择器 (daterange类型)选择日期范围为一个月 选择的时间前后只

element-ui 日期选择器 (daterange类型)选择日期范围为一个月 选择的时间前后只

时间:2023-04-25 06:51:59

相关推荐

element-ui 日期选择器 (daterange类型)选择日期范围为一个月 选择的时间前后只

element-ui 日期选择器 (daterange类型)选择日期范围为一个月,选择的时间前后只能选择一个月内日期

问题描述:

element-ui 日期选择器如何限制只能选择一个月,超过一个月不能选择,也就是在选定起始日期时,只能向后面选择30天,同时不能选择超过今天的日期?

知识点:

element-ui日期选择组件地址:http://element-cn.eleme.io/#/zh-CN/component/date-picker

picker-options:当前时间日期选择器特有的选项,类型object

disabledDate:设置禁用状态,参数为当前日期,要求返回 Boolean,类型Function

onPick:选中日期后会执行的回调,只有当 daterange 或 datetimerange 才生效,类型Function({ maxDate, minDate })

template代码

<el-date-pickerv-model="dateRange":picker-options="pickerOptions"type="daterange"range-separator="-"start-placeholder="Select start time"end-placeholder="Select end time"></el-date-picke>

script代码

data() {return {pickerMinDate: '',dateRange: [],pickerOptions: {onPick: ({maxDate, minDate }) => {this.pickerMinDate = minDate.getTime();if (maxDate) {this.pickerMinDate = '';}},disabledDate: time => {if (this.pickerMinDate !== "") {const day30 = (31 - 1) * 24 * 3600 * 1000;// 只选后30天,minTime不用加day30,只选前30天,maxTime不用加day30let maxTime = this.pickerMinDate + day30;let minTime = this.pickerMinDate + day30;if (maxTime > new Date()) {maxTime = new Date();}return time.getTime() > maxTime || time.getTime() < minTime;}return time.getTime() > Date.now();}},}

element-ui 日期选择器 (daterange类型)选择日期范围为一个月 选择的时间前后只能选择一个月内日期

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