element UI时间日期选择器控制只能选今天此刻半小时后的时间(可自己设置)

最新推荐文章于 2023-10-30 17:03:32 发布

10.10.26

最新推荐文章于 2023-10-30 17:03:32 发布

阅读量1.2k

点赞数 1

分类专栏： VUE 文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/qq_45448489/article/details/126142843

版权

VUE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.使用参数picker-options
建议使用参数time-arrow-control，用箭头进行选择（用鼠标滚轮操作稳定性很差）
disabledDate ：控制只能选择今天及以后的日期
selectableRange ：控制选择的时间段。如果是今天，则时间从下个小时开始，否则从0时开始

data(){
	return{
	      startTimeRange: ''"
	}
}

<el-date-picker v-model="ruleForm.date1" type="datetime"    value-format="yyyy-MM-dd HH:mm:ss"
               placeholder="选择日期时间" :picker-options="{
                 disabledDate: time => {
                   return time.getTime() < Date.now() - 3600 * 1000 * 24
                 },
                 selectableRange: startTimeRange
               }" @focus="focus">
</el-date-picker>

2.使用vue的watch监听
因为是对对象中的一个属性进行监听所以，要写成’ruleForm.date1’

watch: {
    'ruleForm.date1': {
      handler(newValue, oldValue) {
        if (newValue) {
          let time = new Date();
          let yy = time.getFullYear();
          let mm = time.getMonth() + 1;
          let dd = time.getDate();
          let hh = time.getHours();
          let mf = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
          let ss = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
          let nowDate = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
          // let nowDate = this.$format(new Date(), 'YYYY-MM-DD HH:mm:ss');
          let dt = nowDate.split(" ");
          let st = '';

          if (newValue.split(" ")[1] == dt[1]) {
            let timeB = new Date().getTime() + 1800000;
            var timeC = new Date(timeB)
            let h = timeC.getHours();
            let f = timeC.getMinutes() < 10 ? '0' + timeC.getMinutes() : timeC.getMinutes();
            let s = timeC.getSeconds() < 10 ? '0' + timeC.getSeconds() : timeC.getSeconds();
            let startAtC = h + ':' + f + ':' + s;
            // 是今天,选择 的时间开始为此刻的时分秒
            st = startAtC

          }
          else {
            // 明天及以后从0时开始
            // st = '00:00:00';
            let timeB = new Date().getTime() + 1800000;
            var timeC = new Date(timeB)
            let h = timeC.getHours();
            let f = timeC.getMinutes() < 10 ? '0' + timeC.getMinutes() : timeC.getMinutes();
            let s = timeC.getSeconds() < 10 ? '0' + timeC.getSeconds() : timeC.getSeconds();
            let startAtC = h + ':' + f + ':' + s;
            // 是今天,选择 的时间开始为此刻的时分秒
            st = startAtC
          }
          this.startTimeRange = st + ' - 23:59:59';
        }
      }
    }
  }

// 时间选择限制
    focus() {
      this.$nextTick(() => {
        document
          .getElementsByClassName('el-button--text')[0]
          .setAttribute('style', 'display:none')
      })
    },