1. 程式人生 > 實用技巧 >antdv時間選擇a-date-picker設定日期可選範圍(近一週、近半月、近一月等) - moment.js

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 }