element-ui时间组件datetimepicker如何限制时分秒？

Question

目前知道datetimepicker组件type='datetime'时可以通过selectableRange来限制时分秒的范围，但是type='datetimerange'该如何设置时分秒呢？

Answer 1

在 Element UI 的 DateTimePicker 组件中，如果你想限制时分秒的选择范围，特别是对于 type='datetimerange' 的情况，确实需要一些额外的处理，因为 selectableRange 直接用于 DateTimePicker 时主要是限制日期范围，而不是时分秒。

不过，你可以通过 picker-options 属性来自定义时间选择器，并结合 disabledDate、disabledHours、disabledMinutes 和 disabledSeconds 方法来达到限制时分秒的目的。

以下是一个示例代码，展示了如何在 type='datetimerange' 的 DateTimePicker 中限制时分秒：

<template>
  <el-date-picker
    v-model="value"
    type="datetimerange"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions">
  </el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      pickerOptions: {
        disabledDate(time) {
          // 这里可以限制日期范围，如果需要的话
          return false;
        },
        disabledHours() {
          // 例如：禁用0点到8点和22点到24点的时间段
          const hours = [...Array(24).keys()];
          return hours.filter(hour => hour < 8 || hour >= 22);
        },
        disabledMinutes(hour) {
          // 例如：在每个小时中，禁用0分到15分和45分到60分的时间段
          if (hour < 8 || hour >= 22) return [];
          return [...Array(60).keys()].filter(minute => minute < 15 || minute >= 45);
        },
        disabledSeconds(hour, minute) {
          // 例如：在每分钟中，禁用0秒到15秒和45秒到60秒的时间段
          if (hour < 8 || hour >= 22 || (hour >= 8 && hour < 22 && (minute < 15 || minute >= 45))) return [];
          return [...Array(60).keys()].filter(second => second < 15 || second >= 45);
        }
      }
    };
  }
};
</script>

在这个示例中：

• disabledHours 方法返回一个数组，包含了所有要禁用的小时数。
• disabledMinutes 方法根据当前选中的小时数返回一个数组，包含了该小时内要禁用的分钟数。
• disabledSeconds 方法根据当前选中的小时和分钟数返回一个数组，包含了该分钟内要禁用的秒数。

这样，你就可以在 DateTimePicker 的 type='datetimerange' 模式下限制时分秒的选择范围了。如果你只想限制开始时间或结束时间的时分秒，你可以分别对 start-picker-options 和 end-picker-options 进行设置（如果 Element UI 版本支持的话；否则，你可能需要通过其他方式，如拆分两个单独的 DateTimePicker 来实现）。

Answer 2

在 Element UI 的 datetimepicker 组件中，当 type 设置为 'datetimerange' 时，限制时分秒范围的方式与 type='datetime' 有所不同。datetimerange 类型没有直接的 selectableRange 属性来限制具体的时分秒。不过可以使用 disabledDate 和 disabledTime 方法来实现。
以下是一个示例，展示如何在 datetimerange 中限制时分秒的选择范围：

<template>
  <el-date-picker
    v-model="value"
    type="datetimerange"
    start-placeholder="开始日期时间"
    end-placeholder="结束日期时间"
    :picker-options="pickerOptions">
  </el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      value: [],
      pickerOptions: {
        disabledDate(time) {
          // 这里可以添加日期的禁用逻辑
          return false;
        },
        disabledTime(date, type) {
          if (type === 'start') {
            return {
              disabledHours: () => this.range(0, 8).concat(this.range(18, 24)),
              disabledMinutes: () => this.range(1, 59),
              disabledSeconds: () => this.range(1, 59)
            };
          }
          return {
            disabledHours: () => this.range(0, 8).concat(this.range(18, 24)),
            disabledMinutes: () => this.range(1, 59),
            disabledSeconds: () => this.range(1, 59)
          };
        }
      }
    };
  },
  methods: {
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    }
  }
};
</script>

在这个示例中，disabledTime 方法根据选择的类型（开始时间或结束时间）禁用了特定的小时、分钟和秒数。可以根据需要调整 disabledHours、disabledMinutes 和 disabledSeconds 的逻辑。