ElementUI日期时间选择器禁止此刻之前的所有时间选择(精确到，时、分、秒)

最新推荐文章于 2024-02-27 10:48:56 发布

原创最新推荐文章于 2024-02-27 10:48:56 发布

· 2.1k 阅读

5 ·

版权

文章标签：

#elementui #javascript #vue.js

校验同时被 2 个专栏收录

5 篇文章

订阅专栏

vuelidate

3 篇文章

订阅专栏

需求

事件选择禁止选择当前时间（年月日时分秒）之前的时间

html代码

 <el-date-picker
       v-model="drawerForm.regularStartTime"
       :picker-options="timePickerOption"
       type="datetime"
       placeholder="选择开始时间"
       value-format="yyyy-MM-dd HH:mm:ss"
      >
</el-date-picker>

data数据

<script>
    import moment from "moment";
    import { parseTime } from "@/utils/time.js";
    export default {
       data(){
          return {
              timePickerOption: {
                  disabledDate(time) {
                      const dateTime = new Date();
                      const startDateTime = dateTime.setDate(dateTime.getDate() - 1);
                      return time.getTime() < new Date(startDateTime).getTime();
              },
              selectableRange:
                  parseTime(
                      new Date(moment().format("YYYY-MM-DD HH:mm:ss")), "{hh}:{ii}:{ss}" ) + "- 23:59:00",
                  },
              }
        }
    }
</script>

time.js文件代码

export function parseTime(time, cFormat) {
   if (arguments.length === 0) {
      return null;
   }
   const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}";
   let date;
   if (typeof time === "object") {
      date = time;
   } else {
      if (typeof time === "string" && /^[0-9]+$/.test(time)) {
         time = parseInt(time);
      }
      if (typeof time === "number" && time.toString().length === 10) {
         time = time * 1000;
      }
      date = new Date(time);
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay(),
  };
const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
    const value = formatObj[key];
    // Note: getDay() returns 0 on Sunday
    if (key === "a") {
      return ["日", "一", "二", "三", "四", "五", "六"][value];
    }
    return value.toString().padStart(2, "0");
  });
  return time_str;
}

参考文章：https://blog.youkuaiyun.com/alzzw/article/details/123827933
参考讲解比较详细详情请看参考文章