el-date-picker动态限制可选时间范围

最新推荐文章于 2024-08-19 17:10:31 发布

原创最新推荐文章于 2024-08-19 17:10:31 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

需求：用户只能选择当时时间之后的时间，且精确到时分秒

实现效果：如果选择是非当天的日期，时分秒不做限制，如果选择的是当天时间，就要判断时分秒，只能选择当前时间时分秒之后的时间。（这里怕有误差我加了一分钟可根据自己的需求去掉或改变）

 <el-date-picker
    v-model="form.endTime"
     type="datetime"
     placeholder="选择日期时间"
     value-format="yyyy-MM-dd HH:mm"
     format="yyyy-MM-dd HH:mm"
     :picker-options="endTimeOptions"
   >
 </el-date-picker>

写在computed是因为this.form.endTime会变要想selectableRange范围动态变化就写到计算属性里

computed: {
    endTimeOptions() {
      //这里判断是不是今天
      let newVal = new Date(this.form.endTime)
      let selectableRange = '00:00:00 - 23:59:00' //默认的时间范围
      if (
        newVal &&
        newVal.getFullYear() == new Date().getFullYear() &&
        newVal.getMonth() == new Date().getMonth() &&
        newVal.getDate() == new Date().getDate()
      ) {
        //如果为今天，则限制当前时间前的时间+1分钟不能选择。
        selectableRange =
          new Date().getHours() + ':' + (new Date().getMinutes() + 1) + ':00 - 23:59:00'
      }
      return {
        selectableRange,
        disabledDate(time) {
          // 只能选大于当前截止时间的
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    }
  },