el-date-picker时间选择框设置可选范围

73 阅读1分钟

1.当type为daterange时设置时间只能选当月的不能跨月

效果如下,选择开始时间和结束时间的时候只能选择同一个月的,不能跨月选择:

动画.gif

实现代码:

<el-date-picker v-model="condition.dataTime" type="daterange" style="width: 230px" :clearable="false"
  value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions">
</el-date-picker>
  data() {
    return {
      condition: {
        dataTime: []
      },
      year: "",
      month: "",
      all: false,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          if (minDate) {
            this.year = new Date(minDate).getFullYear();
            this.month = new Date(minDate).getMonth();
          } else {
            this.year = "";
            this.month = "";
          }
          if (maxDate) {
            this.all = true;
          } else {
            this.all = false;
          }
        },
        disabledDate: (time) => {
          if (this.all) return false;
          if (this.year === "" || this.month === "") {
            return false;
          }
          let year = new Date(time).getFullYear();
          let month = new Date(time).getMonth();
          if (year !== this.year || month !== this.month) {
            return true;
          }
          return false;
        },
      },
    }
  },