antdv時間選擇a-date-picker設置日期可選範圍(近一週、近半月、近一月等) - moment.js

Vue->Template：

<a-date-picker
  v-model="value"
  :disabled-date="disabledDate"
/>

 

Vue->Methods：

// 設置不可選擇的日期
disabledDate (current) {
  this.value = undefined
  switch (this.data.dateRange) {
    // 近一週
    case 'nearWeek':
      {
        // 計算今天是這周第幾天 週日爲一週中的第一天
        const weekOfday = parseInt(this.moment().format('d'))
        // 獲取當前周的開始結束時間
        const weekStart = this.moment().subtract(weekOfday - 1, 'days')
        const weekEnd = this.moment().add(7 - weekOfday, 'days')
        // 設置區間之外的日期不可選
        return current < weekStart.subtract(1, 'days') || current > weekEnd
      }
    // 近半月
    case 'nearHalfMonth':
      {
        // 獲取本月開始結束時間
        const monthStart = this.moment().startOf('month')
        const monthEnd = this.moment().endOf('month')
        // 區間開始結束
        let start, end
        // 計算今天是這月第幾天
        const monthOfday = parseInt(this.moment().format('D'))
        // 判斷是否處於前半月還是後半月
        if (monthOfday < 15) {
          // 前半月區間：1 ~ 15
          start = monthStart
          end = this.moment(start).add('days', 14)
        } else {
          // 後半月區間：16 ~ 月末最後一天
          start = this.moment(this.moment().format('YYYY-MM') + '-16')
          end = monthEnd
        }
        // 設置區間之外的日期不可選
        return current < start || current > end.add('days', 1)
      }
    // 近一月
    case 'nearMonth':
      {
        // 獲取本月開始結束時間
        const monthStart = this.moment().startOf('month')
        const monthEnd = this.moment().endOf('month')
        // 設置區間之外的日期不可選
        return current < monthStart || current > monthEnd.add('days', 1)
      }
    // 近半年
    case 'nearHalfYear':
      {
        // 獲取今年開始結束時間
        const yearStart = this.moment().startOf('year')
        const yearEnd = this.moment().endOf('year')
        // 區間開始結束
        let start, end
        // 獲取今年天數
        const yearDays = this.moment(yearEnd).diff(yearStart, 'days')
        // 計算今天是今年第幾天
        const yearOfday = parseInt(this.moment().format('DDD'))
        // 判斷是否處於前半年還是後半年
        if (yearOfday < (yearDays / 2)) {
          // 前半年區間：今年開始時間 ~ 第二季度結束
          start = yearStart
          // 今年開始時間+2個季度-1天，即上半年結束時間(第二季度結束)
          end = this.moment(yearStart).add('Q', 2).subtract(1, 'days')
        } else {
          // 後半年區間：第三季度開始 ~ 年末最後一天
          // 今年開始時間+2個季度，即下半年開始時間
          start = this.moment(yearStart).add('Q', 2)
          end = yearEnd
        }
        // 設置區間之外的日期不可選
        return current < start || current > end
      }
    // 近一年
    case 'nearYear':
      {
        // 獲取今年開始結束時間
        const yearStart = this.moment().startOf('year')
        const yearEnd = this.moment().endOf('year')
        // 設置區間之外的日期不可選
        return current < yearStart || current > yearEnd
      }
  }
  return false
}