Element UI 日期范围限制当月,不能跨月

<el-date-picker
      v-model="selectedDateValue"
      type="daterange"
      value-format="yyyy-MM-dd"
      :clearable="false"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
    />
data() {
    return {
      selectedDateValue: [], // 日期区间
      choiceDate: '', // 开始日期
      /**
       * 日期范围限制
       * 根据开始日期月份限制当月,不能跨月
       */
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate = minDate.getTime()
          if (maxDate) {
            this.choiceDate = ''
          }
        },
        disabledDate: time => {
          if (this.choiceDate) {
            const startDay =
              (new Date(this.choiceDate).getDate() - 1) * 24 * 3600 * 1000
            const endDay =
              (new Date(
                new Date(this.choiceDate).getFullYear(),
                new Date(this.choiceDate).getMonth() + 1,
                0
              ).getDate() -
                new Date(this.choiceDate).getDate()) *
              24 *
              3600 *
              1000
            const minTime = this.choiceDate - startDay
            const maxTime = this.choiceDate + endDay
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      }
    }
  }

 

posted @ 2022-09-22 16:41  丹东来了  阅读(984)  评论(0编辑  收藏  举报