当前位置: 首页>移动开发>正文

element ui date-picker 日期范围不能超过三十天

日期组件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

? ? ? ? ? }

? ? ? ? }

? ? ? },

这样就完美解决,当鼠标点击开始日期后,结束日子就只能选中一个月以内的日期。

element ui date-picker 日期范围不能超过三十天,第1张

https://www.xamrdz.com/mobile/45p1994527.html

相关文章: