当前位置：首页 > article >正文

element设置时间和日期框早于现在的时间和日期禁用

article 2024/10/19 6:26:36

效果:

今日此时此刻之前的日期、时间禁止选用，切换日期和时间为“2024-10-19 00:00:00"，再切换为”2024-10-18 00:00:00"时，会给form.time默认赋值为今日此时此刻（日期时间少于今日此时此刻则重新赋值）

安装插件:(不要看到安装插件就走了,操作起来试试,效果还是不错的)

npm install moment

页面引入:(在使用页面引入就行)

import moment from 'moment'; // 引入 moment.js

HTML标签代码:

 <el-date-picker
            v-model="form.time"
            type="datetime"
            placeholder="选择日期时间"
            style="width:100%"
            :picker-options="{
                disabledDate(time) {
                  return time.getTime() < Date.now() - 8.64e7;
                },
                selectableRange: startTimeRange,
              }"
   ></el-date-picker>

方法代码:

data () {
    return {
      form: {
        time: null,
      },
      startTimeRange: '',
    }
  },
  mounted () {   
     let st = moment(new Date().getTime()).format('HH:mm:ss')
    　this.startTimeRange = st + ' - 23:59:59'
　 },

　watch: {
    //监听的值改成你的时间值
    'form.time': {
      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, 'time', moment(new     Date().getTime()).format('YYYY-MM-DD HH:mm:ss'))
            }
          } else {
            // 明天及以后从0时开始
            st = '00:00:00'
          }
          this.startTimeRange = st + ' - 23:59:59'
        }
      }
        deep:true
    }
  },

大概就这样吧,效果不错,就是搬运起来麻烦点,
参考文献:element日期时间组件如何让用户此刻之前的日期与时间不能选择 - rachelch - 博客园
赠送内容:

安装插件后如果报错:

 ERROR  Failed to compile with 87 errors                                                                                                                                                     上午10:25:40

This dependency was not found:

* vue in ./node_modules/@riophae/vue-treeselect/dist/vue-treeselect.cjs.js, ./node_modules/element-ui/lib/popover.js and 85 others

To install it, you can run: npm install --save vue

就把项目中package-lock.json删掉,,然后从新执行 npm install 就回来了并且也不报错了

查看全文

http://www.kler.cn/news/355487.html