解决需求：antd vue中a-range-picker组件日期选择控制可选范围

手电筒joy

已于 2024-06-13 14:11:51 修改

阅读量1.5k

点赞数 16

文章标签： vue.js 前端 javascript anti-design-vue

于 2024-06-13 14:10:10 首次发布

本文链接：https://blog.csdn.net/qq_39210364/article/details/139652572

版权

需求描述：要求时间选择最大只能选择七天，及用户点击第一个时间之后，第二个时间只能选择前后七天内的时间。第一个时间可以非当日。

解决方法：用户点击第一个日期时使第一个日期前后七天范围外的日期变为不可选，使用a-range-picker组件的事件calendarChange和属性disabledDate结合。

组件部分：

<a-range-picker
                  :ranges="{
                    今天: [moment(), moment()],
                    近7天: [moment().subtract('days', 6), moment()]
                  }"
                  show-time
                  @calendarChange="panelChange"
                  :disabled-date="disableDate"
                  format="YYYY-MM-DD HH:mm:ss"
                  @change="datePickerOnChange"
                  style="width:100%;padding-right:3vw"
                />

data定义部分：

currentDate: null,

方法部分：calendarChange事件定义的方法在日期面板变化时调用，即用户每次在日期面板上的选择都会调用方法。

1，将用户点击的第一个日期存在currentDate，在disableDate方法中使用。当用户点击第二个日期时清空currentDate，即清空不可选日期。

2，在disableDate中获取并计算currentDate前后七天外的日期返回给disableDate，设置为不可选。

panelChange(date, dateString) {
      console.log('456', date)
      if (date[0] && !date[1]) {
        this.currentDate = date[0]
      } else if (date[0] && date[1]) {
        this.currentDate = null
      }
    },
      disableDate(time) {
      if ( this.currentDate ) {
        const one = 7 * 24 * 3600 * 1000
        const minTime = this.currentDate - one
            // 当前日期 + one = 7天之后
        const maxTime = this.currentDate + one
         return time < minTime || time > maxTime
      } else {
        return null
      }
    },