element日期时间组件如何让用户此刻之前的日期与时间不能选择

        <el-form-item prop="validity" label="预警有效期">
            <el-date-picker
              v-model="form.validity"
              type="datetime"
              placeholder="选择日期时间"
              :picker-options="{
                disabledDate(time) {
                  return time.getTime() < Date.now() - 8.64e7;
                },
                selectableRange: startTimeRange,
              }"
            >
            </el-date-picker>
          </el-form-item>        
  data () {
    return {
      form: {
        validity: null,
      },
      startTimeRange: '',
    }
  },
  mounted () {
let st = moment(new Date().getTime()).format('HH:mm:ss')
     this.startTimeRange = st + ' - 23:59:59'
  },
 watch: {
    'form.validity': {
      handler(newValue, oldValue) {
        if (newValue) {
          let date = moment(Date.now()).startOf('day').format('YYYY-MM-DD')
          let dateTime = moment(new Date().getTime()).format('HH:mm:ss')
          let newVal = moment(newValue).format('YYYY-MM-DD')
          let st = ''
          if (newVal == date) {
            // 是今天, 选择的时间开始为此刻的时分秒
            st = dateTime
            // 切换日期的时候,如果日期为今天,且时间少于当前时间,则设为今日当前时间
            if (new Date(newValue).getTime() < new Date().getTime()) {
              this.$set(this.form, 'validity', moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss'))
            }
          } else {
            // 明天及以后从0时开始
            st = '00:00:00'
          }
          this.startTimeRange = st + ' - 23:59:59'
        }
      }
    }
  },

效果:

今日此时此刻之前的日期、时间禁止选用,切换日期和时间为“2022-07-29 00:00:00",再切换为”2022-07-28 00:00:00"时, 会给form.validity默认赋值为今日此时此刻(日期时间少于今日此时此刻则重新赋值)

 

posted @ 2022-07-28 14:42  rachelch  阅读(887)  评论(0编辑  收藏  举报