Element UI DateTimePicker 日期时间选择器：自定义时间范围选择

DateTimePicker 组件的默认配置是只能选择一年的时间，这是因为在实际开发中，大多数情况下只需要选择一年内的时间。

如果需要选择更长时间范围的时间，可以通过设置 DateTimePicker 组件的属性来实现。具体来说，可以通过设置 'start-date' 和 'end-date' 属性来限制可选的时间范围。例如，设置 'start-date' 为 '1990-01-01'，'end-date' 为 '2030-12-31'，就可以选择 1990 年到 2030 年之间的任意时间。

另外，如果需要根据用户选择的开始时间来动态设置可选的时间范围，可以通过监听 DateTimePicker 组件的 'change' 事件，在事件回调函数中动态设置 'start-date' 和 'end-date' 属性。例如，当用户选择了 2020 年作为开始时间时，可以将 'end-date' 设置为 '2021-12-31'，这样就可以选择 2020 年到 2021 年之间的任意时间。

下面是一个示例代码：

<template>
  <div>
    <el-date-picker
      v-model="startDate"
      type="date"
      placeholder="选择开始日期"
      @change="handleStartDateChange"
    ></el-date-picker>
    <el-date-picker
      v-model="endDate"
      type="datetime"
      placeholder="选择结束日期时间"
      :start-date="startDate"
      :end-date="endDateLimit"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startDate: null,
      endDate: null,
      endDateLimit: null,
    };
  },
  methods: {
    handleStartDateChange() {
      if (this.startDate) {
        const year = new Date(this.startDate).getFullYear();
        this.endDateLimit = `${year + 1}-12-31 23:59:59`;
      } else {
        this.endDateLimit = null;
      }
    },
  },
};
</script>

在上面的代码中，我们通过监听 'startDate' 的 'change' 事件，在事件回调函数中动态设置 'endDateLimit' 属性。当 'startDate' 有值时，我们将 'endDateLimit' 设置为 'startDate' 所在年份的下一年的最后一天；当 'startDate' 为空时，我们将 'endDateLimit' 设置为 null，表示不限制可选时间范围。在 DateTimePicker 组件中，我们将 'start-date' 属性绑定到 'startDate'，将 'end-date' 属性绑定到 'endDateLimit'，这样就可以根据用户选择的开始时间动态设置可选的时间范围了。