element plus 日期时间选择器 时分秒大于当期时间

Element Plus是一个Vue 3 UI组件库，它的日期时间选择器（Date Picker）提供了丰富的交互式日期和时间选择功能。如果你想要限制用户选择的时间不能超过当前时间，并且包括小时、分钟和秒，通常可以在日期时间选择器的事件监听器中实现这个逻辑。

例如，在Element Plus的`el-date-picker`组件中，你可以使用`@change`或`@input`事件来获取用户的选择并检查它是否大于当前时间。这里有一个简单的示例：

<template>
  <el-date-picker
    v-model="selectedDateTime"
    type="datetime"
    :picker-options="{ disabledTime: { format: 'HH:mm:ss', timeDisabled: (time) => time > now } }"
  ></el-date-picker>
</template>

<script setup>
import { ref } from 'vue';
const now = new Date();
const selectedDateTime = ref(now);

// 简化版的函数，假设now始终指向当前时间
function isTimeDisabled(time) {
  return time.getHours() * 60 * 60 + time.getMinutes() * 60 + time.getSeconds() > now.getTime();
}

// 使用isTimeDisabled函数作为disabledTime选项
</script>

在这个例子中，`disabledTime`属性接收一个回调函数，该函数会判断给定的时间是否超出当前时间范围。如果返回true，那么对应的时间将会被禁用。