1. 程式人生 > 實用技巧 >elementui 日曆元件

elementui 日曆元件

限制elementuipicker元件限制選擇日期在一個月內。

<el-date-picker
      v-model="dateValue"
      class="filter-item"
      type="daterange"
      value-format="yyyy-MM-dd"
      start-placeholder="開始日期"
      end-placeholder="結束日期"
      @blur="dateBlurHandle"
      :picker-options="pickerOptions"
    >
 </el-date-picker>

//
bind 值 dateValue: "", pickerOptions: { onPick: ({ maxDate, minDate }) => { this.choiceDateMinTime = minDate.getTime(); this.choiceDateMaxTime = maxDate; this.choiceDateMin = minDate; console.log(maxDate, minDate) if (maxDate) {
this.choiceDateMinTime = ""; } }, disabledDate: time => { if (!isNull(this.choiceDateMinTime)) { const _year = this.choiceDateMin.getFullYear(); const _month = this.choiceDateMin.getMonth() + 1; const maxTime = new Date(_year, _month, 0).getTime(); const nowDate
= Date.now(); let temp = Math.min(maxTime, nowDate); return time.getTime() < this.choiceDateMinTime || time.getTime() > temp; } return time.getTime() > Date.now(); } }, choiceDateMinTime: "", choiceDateMaxTime: "", choiceDateMin: "", //方法 dateBlurHandle() { if(!this.choiceDateMaxTime) { this.choiceDateMinTime = '' } },