antvue日期选择器实现对时间范围的选择限制

前言

本文主要解决在Ant Design Vue中，日期选择器<a-date-picker>如何设置选择范围。

主要有两种时间范围限制的情况：

1. 今天之前的年月日不可选，不包括今天；并且当前的时间点之前的时间不可选。
2. 结束时间不能早于开始时间。

一、需求背景

最近做的后台项目中，有一项设置时间的配置项，要求选择时间时，不能选择今天之前的年月日，并且当前时间点之前的时间不可选。
主要是为了在系统操作层面就做好对用户使用的限制。减少很多不必要的问题。

二、第一种情况的实现效果图

三、实现方法

1. html中的写法如下的，其中show-time记得要写，disabled-date和disabled-time要分别设置：

<a-form-model-item label="选择触发时间" prop="publishTime">
    <a-date-picker
      v-model="form.publishTime"
      format="YYYY-MM-DD HH:mm:ss"
      valueFormat="YYYY-MM-DD HH:mm:ss"
      :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
      :disabled-date="disabledDate"
      :disabled-time="disabledDateTime"
      @change="setTime"
      @ok="onTimeStrChange"
      allowClear
    />
</a-form-model-item>

2. 主要操作在js中：

• 首先在data中声明一个变量currentHours，实时记录选中的当前日期：

data() {
  return {
    currentHours: '', // 实时记录选中的当前日期
  }
}

• 然后设置disabledDate：

disabledDate(current) {
  return current && current < moment().subtract(1, 'day') // 今天之前的年月日不可选，不包括今天
},

• 继续设置disabledDateTime：

disabledDateTime() {
  return {
    disabledHours: () =>
      moment(new Date()).format('YYYY-MM-DD') === this.currentHours
        ? this.range(0, moment().hour())
        : this.range(0, ''),
    disabledMinutes: () =>
      moment(new Date()).format('YYYY-MM-DD') === this.currentHours
        ? this.range(0, moment().minute())
        : this.range(0, '')
  }
},

range(start, end) {
  const result = []
  for (let i = start; i < end; i++) {
    result.push(i)
  }
  return result
},

• 在change事件中对时间赋值：

setTime(data, datastring) {
  this.currentHours = moment(datastring).format('YYYY-MM-DD')
},

• 最后点确定的时候，对这个时间进行赋值：

onTimeStrChange(date) {
  this.form.publishTime = date
},

所有js的操作如下截图：

四、第二种情况的实现效果图

结束时间的选择不能早于开始时间：

同样的，如果选完起止时间后，想更改开始时间，也可以做个限制，即已选定的结束时间后面的日期都不允许选择：

五、实现方案

1. 首先在data中声明起止时间的变量：

data() {
  return {
    startTime: undefined, // 计划期限（起）
    endTime: undefined, // 计划期限（止）
    form: {
      startTime: undefined, // 计划期限（起）
      endTime: undefined, // 计划期限（止）
    },
  }
}

2. 然后在html和js中分别做如下操作即可：

附上代码：

<a-col :span="8">
  <a-form-model-item label="计划期限（起）" prop="startTime">
    <a-date-picker
      show-time
      :disabled-date="disabledStartTimeStr"
      @change="(date, dateString) => changeDate(date, dateString, 'startTime')"
      v-model="startTime"
    />
  </a-form-model-item>
</a-col>
<a-col :span="8">
  <a-form-model-item label="计划期限（止）" prop="endTime">
    <a-date-picker
      show-time
      :disabled-date="disabledEndTimeStr"
      @change="(date, dateString) => changeDate(date, dateString, 'endTime')"
      v-model="endTime"
    />
  </a-form-model-item>
</a-col>

disabledStartTimeStr(startValue) {
  const endValue = this.endTime
  if (!startValue || !endValue) {
    return false
  }
  return startValue.valueOf() > endValue.valueOf()
},
disabledEndTimeStr(endValue) {
  const startValue = this.startTime
  if (!endValue || !startValue) {
    return false
  }
  return startValue.valueOf() >= endValue.valueOf()
},
changeDate(date, dateString, item) {
  this.form[item] = dateString
},

六、总结

在实际项目中，有时候需要依靠技术手段对用户的操作做一定的限制，防止出现很多不必要的问题。

以上，希望对大家有帮助！