Element UI 日期时间选择器：跨年时间选择方案

要使用 DateTimePicker 选择器选择超过一年的时间，您可以使用 el-date-picker 和 el-time-picker 组合。例如，您可以使用 el-date-picker 选择年份，然后使用 el-time-picker 选择时间。以下是示例代码：

<template>
  <div>
    <el-date-picker
      v-model="date"
      type="year"
      placeholder="选择年份"
      @change="handleChangeYear"
    ></el-date-picker>
    <el-time-picker
      v-model="time"
      placeholder="选择时间"
      :picker-options="pickerOptions"
    ></el-time-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: null,
      time: null,
      pickerOptions: {
        start: '00:00',
        end: '23:59',
        step: '00:30',
      },
    };
  },
  methods: {
    handleChangeYear() {
      // 限制选择器最多只能选择一年的时间
      const currentYear = new Date().getFullYear();
      const selectedYear = new Date(this.date).getFullYear();
      if (selectedYear === currentYear) {
        this.pickerOptions.end = new Date().toLocaleTimeString('en-US', {
          hour12: false,
        });
      } else {
        this.pickerOptions.end = '23:59';
      }
    },
  },
};
</script>

在上面的代码中，我们使用 el-date-picker 选择年份，并在 change 事件中更新 el-time-picker 的 pickerOptions。我们使用 pickerOptions 来限制选择器的最小和最大时间，以及步长。在 handleChangeYear 方法中，我们检查所选年份是否等于当前年份，并根据需要更新选择器的结束时间。如果所选年份等于当前年份，则结束时间为当前时间；否则，结束时间为 '23:59'。