elementui日期时间选择器禁用时间

您可以使用 Element UI 的日期时间选择器的 disabledDate 属性来禁用特定的时间。该属性接受一个函数作为参数,该函数返回一个布尔值,指示是否禁用某个日期/时间。

以下是一个例子,演示如何禁用 Element UI 的日期时间选择器中的某些时间段:

<template>
  <el-date-picker
    v-model="value"
    type="datetime"
    :disabled-date="disabledDate"
  ></el-date-picker>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      disabledTimes: [
          start: '09:00', // 禁用从 09:00 到 12:00 的时间段
          end: '12:00'
          start: '13:00', // 禁用从 13:00 到 18:00 的时间段
          end: '18:00'
  methods: {
    disabledDate(time) {
      const disabledTimes = this.disabledTimes
      const disabled = disabledTimes.some((item) => {
        const start = new Date(`${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()} ${item.start}`)
        const end = new Date(`${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()} ${item.end}`)
        return time >= start && time <= end
      return disabled
</script>

在上面的代码中,我们使用 disabledTimes 数组来存储要禁用的时间段。disabledDate 方法检查是否有任何禁用的时间段包含选定的时间,如果是,则返回 true,否则返回 false

希望这可以帮助您禁用 Element UI 的日期时间选择器中的时间。

  •