美文网首页
el-date-picker选择时间,禁止日期,包括禁止时间点

el-date-picker选择时间,禁止日期,包括禁止时间点

作者: 我是七月 | 来源:发表于2022-02-21 17:47 被阅读0次

el-date-picker选择时间

一、禁止当前时间之后的时间,包括禁止时间点

   <el-date-picker :key="'publishDate'" v-model="dataForm.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 {
     dataForm: {
        faultTime: null, //故障时间
      },
    selectableRange: "",
    };
  },
  watch: {
    'dataForm.faultTime': {
      handler(newValue, oldValue) {
        console.log("newValue======", newValue)
        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.dataForm.faultTime = dateTime
          } else if (newValue.split(' ')[0] != oldValue.split(' ')[0]) {
            this.dataForm.faultTime = dateTime
          }
        } else {
          maxTime = '23:59:59'
        }
        this.selectableRange = '00:00:00 - ' + maxTime
      }
    }
  },

二、禁止当前时间之前的时间,包括禁止时间点

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

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

      }
    }
  },

相关文章

网友评论

      本文标题:el-date-picker选择时间,禁止日期,包括禁止时间点

      本文链接:https://www.haomeiwen.com/subject/ufuilrtx.html