【study】el-date-picker 设置可选择日期范围

168 阅读1分钟
// el-date-picker 设置可选择日期范围,选择框的第一个日期的后60天可选,其他时间不可选

<el-date-picker
      v-model="query.scheduledStartTime"
      :picker-options="pickerOptions"
      :default-time="['00:00:00', '23:59:59']"
      value-format="timestamp"
      type="daterange"
      range-separator="至"
      class="w200"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
/>

// data下面
            pickerOptions: {
                onPick: ({ maxDate, minDate }) => {
                    if (minDate && !maxDate) {
                        this.disableOfDate = minDate.getTime();
                    } else {
                        this.disableOfDate = '';
                    }
                },
                disabledDate: (time) => {
                    if (this.disableOfDate) {
                        const range = 60 * 24 * 3600 * 1000;
                        const maxTime = this.disableOfDate + range;
                        const minTime = this.disableOfDate - range;
                        return time.getTime() > maxTime || time.getTime() < minTime;
                    } else {
                        return false;
                    }
                },
            },