526互联

ElementUI之el-date-picker禁选配置

发布时间 2023-04-05 16:49:20作者: 羽丫头不乖

日期选择器之picker-options设置

<el-date-picker
    v-model="dateChoose"
    clearable
    type="date"
    format="yyyyMMdd"
    value-format="yyyyMMdd"
    :editable="false"
    :picker-options="pickerOptions"
    class="w100">
</el-date-picker>

1、只允许选择当月的日期

this.month = "2023-01",
pickerOptions: {
  disabledDate: (time) => {
      if (this.month) {
          let _t =  new Date(this.month),
          _f = new Date(_t.getFullYear(),_t.getMonth()+1, 1).getDate(),
          _l = new Date(_t.getFullYear(),_t.getMonth()+1, 0).getDate();
          const firstTime = new Date(this.month+'-'+_f).getTime();
          const lastTime = new Date(this.month+'-'+_l).getTime();
          return time.getTime() < firstTime || time.getTime() > lastTime
        }
    }
},

2、只允许选择today往后的日期，不含当天

pickerOptions: {
    disabledDate: (time) => {
        let _t =  new Date().getTime();
        return time.getTime() < _t; // time.getTime() < Date.now()
    }
},

3、只允许选择today往前的日期，含当天

pickerOptions: {
    disabledDate: (time) => {
        let _t =  new Date().getTime();
        return time.getTime() > _t
    }
},

4、只允许选择当前日期往前2周，today-14，含当天

pickerOptions: {
  disabledDate: (time) => {
      let _t =  new Date().getTime();
      let prev = new Date(new Date(_t).getTime() - (14 * 24 * 3600 * 1000)).getTime();
      return time.getTime() > _t || time.getTime() < prev;
    }
},

5、只能选择3年前的日期

pickerOptions: {
    disabledDate: (time) => {
        let _t =  new Date().getTime();
        let three =  _t - (1000 * 3600 * 24 * 365 * 3);
        return time.getTime() > three;
    }
},

6、只能选择3年后的日期

pickerOptions: {
    disabledDate: (time) => {
        let _t =  new Date().getTime();
        let three =  _t + (1000 * 3600 * 24 * 365 * 3);
        return time.getTime() < three;
    }
},

7、选择区间在[当前日期往前一年，当前日期往后一年]

pickerOptions: {
 disabledDate: (time) => {
     let _t =  new Date().getTime();
     let prevY =  _t - (1000 * 3600 * 24 * 365 * 1);
     let nextY = _t + (1000 * 3600 * 24 * 365 * 1)
     return time.getTime() < prevY || time.getTime() > nextY;
 }
},

8、选择区间在[当前年1月1号，当前年12月31号]

pickerOptions1: {
    disabledDate: (time) => {
        let _t =  new Date();
        let _f = new Date(_t.getFullYear(),0, 1).getTime();
        let _l = new Date(_t.getFullYear(),12, 0).getTime();
        return time.getTime() < _f || time.getTime() > _l;
    }
},

9、在指定区间内选择，如["2023-03-01","2023-04-18"]，含后不含前

pickerOptions: {
    disabledDate: (time) => {
        let _f = new Date("2023-03-01").getTime();
        let _l = new Date("2023-04-18").getTime();
        return time.getTime() < _f || time.getTime() > _l
    }
},

10、限制在一个月之内

pickerOptions: {
    disabledDate: (time) => {
        let one = 30*24*3600*1000, today = new Date().getTime();
        let _p = today - one;
        let _n = today + one;
        return time.getTime() < _p || time.getTime() > _n
    }
},

11、禁止选择周末

pickerOptions: {
    disabledDate: (time) => {
        return time.getDay() === 6 || time.getDay() === 0;
    }
},

年份选择器之picker-options设置

<el-date-picker
    v-model="yearChoose"
    clearable
    type="year"
    :editable="false"
    :picker-options="pickerOptions"
    class="w100">
</el-date-picker>

1、指定年份禁选，如['2022','2023','2024']

pickerOptions: {
    disabledDate: (time) => {
        let _y = ['2022','2023','2024']
        let y = new Date(time).getFullYear();
        return _y.includes(y)
    }
},

月份选择器之picker-options设置

<el-date-picker
    v-model="monthChoose"
    clearable
    type="month"
    :editable="false"
    :picker-options="pickerOptions"
    class="w100">
</el-date-picker>

1、指定月份禁选，如[1月，2月，3月]

pickerOptions: {
    disabledDate: (time) => {
        let _m = [0, 1, 2]
        let m = new Date(time).getMonth();
        return _m.includes(m)
    }
},

2、当前月往后

pickerOptions: {
    disabledDate: (time) => {
        let _m = new Date().getMonth();
        return time.getMonth() > _m;
    }
},

3、当前月往前

pickerOptions: {
    disabledDate: (time) => {
        let _m = new Date().getMonth();
        return time.getMonth() < _m;
    }
},