js el-date-picker 时间禁止选择

204 阅读1分钟

需要注意的是el-date-picker 的format格式跟dayjs的格式稍有不同;

  • el的格式:yyyy-MM-dd HH:mm:ss;
  • dayjs的格式: YYYY-MM-DD HH:mm:ss;

禁止选择当前时间之前的时间:

<el-date-picker
  format="HH:mm"
  size="small"
  value-format="yyyy-MM-dd HH:mm:ss"
  v-model="datetime"
  type="datetime"
  :picker-options="{
    disabledDate(time) {
      return time.getTime() < Date.now() - 8.64e7;
    }, selectableRange: selectableRange }"
  placeholder="选择日期时间">
</el-date-picker>



import dayjs from 'dayjs';

 data() {
  return {
      datetime: '',
      selectableRange: '',
  }
 }


  watch: {
    datetime: {
      handler(newValue, oldValue) {
        const time = dayjs().format('YYYY-MM-DD HH:mm:ss');
        const dt = time.split(' ');
        let minTime = '';
        // 是今天,选择 的时间开始为此刻的时分秒
        if (newValue.split(' ')[0] === dt[0]) {
          minTime = dt[1];
          if (!oldValue) {
            this.datetime = time;
          } else if (newValue.split(' ')[0] !== oldValue.split(' ')[0]) {
            this.datetime = time;
          }
        } else {
          minTime = '00:00:00';
        }
        this.selectableRange = `${minTime} - 23:59:59`;
      },
    },
  },

禁止选择今天之后的时间:


<el-date-picker
    :key="'date'"
    v-model="faultTime"
    style="width:100%"
    type="datetime"
    value-format="yyyy-MM-dd HH:mm:ss"
    placeholder="选择日期时间"
    :picker-options="{
      disabledDate(time) {
        return time.getTime() > Date.now()
      },
      selectableRange: selectableRange
    }" />
    
    
import dayjs from 'dayjs'

 data() {
    return {
      faultTime: null,
      selectableRange: "",
    };
  },
  watch: {
    faultTime: {
      handler(newValue, oldValue) {
        let dateTime = dayjs().format("YYYY-MM-DD HH:mm:ss"); //当前时间
        const dt = dateTime.split(' ')
        let maxTime = ''
        // 是今天,选择 的时间开始为此刻的时分秒
        if (newValue.split(' ')[0] === dt[0]) {
          maxTime = dt[1]
          if (!oldValue) {
            this.faultTime = dateTime
          } else if (newValue.split(' ')[0] != oldValue.split(' ')[0]) {
            this.faultTime = dateTime
          }
        } else {
          maxTime = '23:59:59'
        }
        this.selectableRange = '00:00:00 - ' + maxTime
      }
    }
  },