Antd RangePicker限制选择时间段为30天，动态禁用其他日期

最新推荐文章于 2024-07-22 08:50:00 发布

WindyMorgan

最新推荐文章于 2024-07-22 08:50:00 发布

阅读量1.2w

点赞数 12

分类专栏：技术日常文章标签：前端 vue.js AntD

本文链接：https://blog.csdn.net/qq_39186346/article/details/107687502

版权

技术日常专栏收录该内容

16 篇文章 0 订阅

订阅专栏

需求说明：

根据选择的时间，动态禁用范围外的时间。RangePicker时间选择框，只能选择今天及之前的时间，最多选择30天。

比如：当前时间为2020-07-30，首先需要禁用2020-07-30以后的时间；

选择了时间2020-05-01，需要禁用2020-05-31之后和2020-04-01之前的时间，保证最后只能选择最多31天的数据

代码思路：

进入页面日期选择框内默认显示最近一个月，今天以后的时间禁用；选择开始时间，动态禁用30天区间之外的时间；

方法介绍：

标签内容：

<a-range-picker
    :disabled-date="disabledPriceRangeDate"
    v-model="priceRangeDate"
    @calendarChange="calendarPriceRangeChange"
    @change="changePriceRangeDate" />

逻辑代码：

<script>
import moment from 'moment'
export default {
  data() {
    return {
      priceRangeDate: [
          moment(this.formatDate(new Date().getTime() - 30*86400000, 'Y-m-d')),
          moment(this.formatDate(new Date().getTime(), 'Y-m-d'))
      ],
      selectPriceDate: '',
      offsetDays: 2678400 * 1000 //最多选择范围31天ms
    }
  },
  methods:{
    //选择完时间
    changePriceRangeDate(value) {
      this.selectPriceDate = ''
    },
    //选择开始时间/结束时间
    calendarPriceRangeChange(date){
      this.selectPriceDate = date[0]
    },
    //根据选择的开始时间/结束时间，动态渲染要禁用的日期
    disabledPriceRangeDate(current){
      if(this.selectPriceDate){
        let selectV = moment(this.selectPriceDate, 'YYYY-MM-DD').valueOf()
        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
    }
  }
}
</script>

参考文章：

https://blog.csdn.net/weixin_44674459/article/details/106000338