当前位置：首页 > article >正文

vue element日期范围选择器只能选择指定天数内的

article 2025/9/14 3:38:15

<el-date-pickerv-model="dateRange"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"format="yyyy-MM-dd"value-format="yyyy-MM-dd"clearable:picker-options="pickerOptions"@change="changeDateRange"
>
</el-date-picker>

data() {return {minDate: '',maxDate: '',dateRange: [],pickerOptions: {onPick: ({maxDate, minDate}) => {// 在onPick里获取时间会在选中一个时间的时候就获取到，如果没有onPick直接用dateRange获取，只选中一个的话获取不到，disabledDate不能及时的做出时间限制this.minDate = minDate;this.maxDate = maxDate;},disabledDate: () => {}// 不能直接放computed里写，会报错},dateRangeNum: 0,// 指定天数}
},
mounted() {this.getDateRange()
},
methods: {getDateRange() {// 此处调接口，假设接口返回 res.KeyValue = 10this.dateRangeNum = res.KeyValuethis.$set(this.pickerOptions, 'disabledDate', (time) => {let dateRangeNumMs = this.dateRangeNum * 24 * 60 * 60 * 1000;// 获取制定天数的毫秒数// 如果选中了其中一个时间，就把选中的时间转换成毫秒数，再处理后转换成Date对象与time作对比，指定不可选中范围(前后都有指定时间范围的处理是因为组件会自动把小的那个当开始时间)if (this.minDate) {return (time < new Date(this.minDate.getTime() - dateRangeNumMs) || time > new Date(this.minDate.getTime() + dateRangeNumMs));}})},changeDateRange(e) {// 清空时间的时候也清空一下子这个if (e === null) {this.minDate = "";this.maxDate = "";}},
}