日期组件type为daterange时,需要控制最长日期不能超过三十天。
通过使用组件"picker-options"对象,进行控制,主要用到,onPick及disabledDate.
picker-options:当前时间日期选择器特有的选项,类型object
disabledDate:设置禁用状态,参数为当前日期,要求返回Boolean,类型Function
onPicker:选中日期后会执行的回调,只有当dateRange活dateTimeRange才生效,类型Funciton({maxDate,minDate})
具体用法如下:
1)组件写法:
?<el-date-picker
? ? ? ? ? ? v-model="searchForm.date"
? ? ? ? ? ? type="daterange"
? ? ? ? ? ? range-separator="-"
? ? ? ? ? ? value-format="yyyyMMdd"
? ? ? ? ? ? start-placeholder="开始日期"
? ? ? ? ? ? end-placeholder="结束日期"
? ? ? ? ? ? @blur="isRestart = true"
? ? ? ? ? ? :picker-options="pickerOptions"
? ? ? ? ? ? clearable
? ? ? ? ? > </el-date-picker>
2)pickerOptions 定义:
?pickerOptions: {
? ? ? ? onPick: ({
? ? ? ? ? maxDate,
? ? ? ? ? minDate
? ? ? ? }) => {
? ? ? ? ? this.isRestart = false
? ? ? ? ? this.pickerMinDate = minDate.getTime()
? ? ? ? ? if (maxDate) {
? ? ? ? ? ? this.pickerMinDate = ''
? ? ? ? ? }
? ? ? ? },
? ? ? ? disabledDate: (time) => {
? ? ? ? ? if (this.curveTime && this.isRestart) {
? ? ? ? ? ? // 存在选中的日期且没有重新选择日期 不做禁用处理
? ? ? ? ? ? return
? ? ? ? ? }
? ? ? ? ? if (this.pickerMinDate !== '') {
? ? ? ? ? ? const one = 30 * 24 * 3600 * 1000
? ? ? ? ? ? const minTime = this.pickerMinDate - one
? ? ? ? ? ? const maxTime = this.pickerMinDate + one
? ? ? ? ? ? return time.getTime() < minTime || time.getTime() > maxTime
? ? ? ? ? }
? ? ? ? }
? ? ? },
这样就完美解决,当鼠标点击开始日期后,结束日子就只能选中一个月以内的日期。