Ant Design Vue range-picker限定可选择的时间范围，动态禁用其他日期

Ant Design Vue range-picker限定可选择的时间范围，动态禁用其他日期。

比如可选择的时间范围是7天   那么也就是动态进入选定时间的前后6天，再动态禁用今天以后的时间。代码如下：

<a-form-item label="选择日期">
                  <a-range-picker style="width: 220px"
                                  :disabled-date="disabledPriceRangeDate"
                                  v-model="priceRangeDate"
                                  @calendarChange="calendarPriceRangeChange"
                                  @change="changePriceRangeDate" />
                </a-form-item>

import moment from "moment";

data() {
    return {
      loading:true,
      offsetDays:6*24*60*60*1000, //最多选择范围6天ms
      selectPriceDate:'',
      priceRangeDate:[//默认显示一周   今天是最后一天
        moment(this.formatDate(new Date().getTime()-6*86400000,'Y-m-d')),
        moment(this.formatDate(new Date().getTime(),'Y-m-d')),
      ],
}

//选择完时间
    changePriceRangeDate(date) {
      this.queryParam.startTime=this.formatDate(date[0], 'Y-m-d');
      this.queryParam.endTime=this.formatDate(date[1], 'Y-m-d');
    },
    //选择开始时间/结束时间
    calendarPriceRangeChange(date){
      this.queryParam.startTime=this.formatDate(date[0], 'Y-m-d');
      this.queryParam.endTime=this.formatDate(date[1], 'Y-m-d');
      this.selectPriceDate = date[0]
    },
    //根据选择的开始时间/结束时间，动态渲染要禁用的日期
    disabledPriceRangeDate(current){
      if(this.selectPriceDate){
        let selectV = moment(this.selectPriceDate, 'YYYY-MM-DD').valueOf()
//禁用选定时间前后6天和今天之后的日期
        return current > moment(this.formatDate(new Date(selectV+this.offsetDays).getTime(), 'Y-m-d')) ||
            current < moment(this.formatDate(new Date(selectV-this.offsetDays).getTime(), 'Y-m-d')) ||
            current > moment().endOf('day')
      }else{
        return current > moment().endOf('day')//禁用今天之后的日期
      }
    },
//格式化日期的方法  可封装为工具类
    formatDate: (timestamp, formatLayout = 'Y-m-d H:i:s') => {
      let formatDate = ""
      formatLayout = formatLayout.toUpperCase()
      timestamp = (timestamp+"").length > 11 ? timestamp : timestamp * 1000
      let time = new Date(timestamp)
      for (let i in formatLayout) {
        if (['Y','M','D', 'W','H','I','S'].indexOf(formatLayout[i]) >= 0) {
          switch (formatLayout[i]) {
            case 'Y':
              formatDate += time.getFullYear()
              break;
            case 'M':
              formatDate += time.getMonth() >= 9 ? time.getMonth() + 1 : '0' + (time.getMonth() + 1)
              break;
            case 'D':
              formatDate += time.getDate() > 9 ? time.getDate() : '0' + time.getDate()
              break;
            case 'W':
              formatDate += time.getDay() == 0 ? 7 : time.getDay()
              break;
            case 'H':
              formatDate += time.getHours() > 9 ? time.getHours() : '0' + time.getHours()
              break;
            case 'I':
              formatDate += time.getMinutes() > 9 ? time.getMinutes() : '0' + time.getMinutes()
              break;
            case 'S':
              formatDate += time.getSeconds() > 9 ? time.getSeconds() : '0' + time.getSeconds()
              break;
          }
        }else{
          formatDate += formatLayout[i]
        }
      }
      return formatDate
    },
    changeDate(id){
      this.visible=true;
      this.selectModal.type="1";//重置签到类型的值
      this.selectModal.id=id;
    },

 欢迎评论、点赞、转载，谢谢。

最后

以上就是善良背包为你收集整理的Ant Design Vue range-picker限定可选择的时间范围，动态禁用其他日期的全部内容，希望文章能够帮你解决Ant Design Vue range-picker限定可选择的时间范围，动态禁用其他日期所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。