jeecgboot vue3.0 中 日期时间选择框禁止选择当前时间以前的时间

你可以使用 element-plus 中的 DatePicker 组件和 TimePicker 组件来实现这个需求。

首先，你需要在页面中引入 element-plus：

<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">

<!-- import JavaScript -->
<script src="https://unpkg.com/vue@3.0.0/dist/vue.global.js"></script>
<script src="https://unpkg.com/element-plus/lib/index.full.js"></script>

然后，在模板中使用 DatePicker 和 TimePicker 组件，并设置 `:picker-options` 属性：

<template>
  <div>
    <el-date-picker
      v-model="date"
      type="date"
      :picker-options="datePickerOptions"
    ></el-date-picker>
    <el-time-picker
      v-model="time"
      :picker-options="timePickerOptions"
    ></el-time-picker>
  </div>
</template>

接下来，在 Vue 组件中定义 `datePickerOptions` 和 `timePickerOptions`：

export default {
  data() {
    return {
      date: null,
      time: null,
      datePickerOptions: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 8.64e7; // 禁止选择当前时间以前的日期
        },
      },
      timePickerOptions: {
        disabledHours: () => {
          const now = new Date();
          return [...Array(now.getHours()).keys()]; // 禁止选择当前时间以前的小时
        },
        disabledMinutes: (hour) => {
          const now = new Date();
          if (hour === now.getHours()) {
            return [...Array(now.getMinutes()).keys()]; // 禁止选择当前时间以前的分钟
          } else {
            return [];
          }
        },
        disabledSeconds: (hour, minute) => {
          const now = new Date();
          if (hour === now.getHours() && minute === now.getMinutes()) {
            return [...Array(now.getSeconds()).keys()]; // 禁止选择当前时间以前的秒数
          } else {
            return [];
          }
        },
      },
    };
  },
};

以上代码中，`disabledDate` 方法用来判断某个日期是否可选，`disabledHours`、`disabledMinutes`、`disabledSeconds` 方法用来判断某个小时、分钟、秒数是否可选。这些方法中，我们都可以使用 `Date.now()` 来获取当前时间，并且使用 JavaScript 的 Date 对象来处理时间。