elementUI DateTimePicker根据选取日期来设置时间选择范围

在Element UI的DateTimePicker组件中，您可以通过监听change事件来根据选取的日期设置时间范围。以下是一个简单的例子，展示了如何根据当前日期设置时间选择的默认开始时间和结束时间。

<template>
  <el-date-picker
    v-model="date"
    type="date"
    placeholder="选择日期"
    @change="handleDateChange"
  ></el-date-picker>
  <el-time-picker
    v-model="startTime"
    placeholder="开始时间"
  ></el-time-picker>
  <el-time-picker
    v-model="endTime"
    placeholder="结束时间"
  ></el-time-picker>
</template>
 
<script>
export default {
  data() {
    return {
      date: null,
      startTime: null,
      endTime: null
    };
  },
  methods: {
    handleDateChange(value) {
      const now = new Date(value);
      // 设置默认开始时间为08:00
      this.startTime = new Date(now.setHours(8));
      // 设置默认结束时间为18:00
      this.endTime = new Date(now.setHours(18));
    }
  }
};
</script>

在这个例子中，当用户选择一个日期时，handleDateChange方法会被触发。在这个方法中，我们基于选定的日期设置了开始时间为上午8点，结束时间为下午6点。这只是一个简单的例子，您可以根据实际需求调整时间的设置逻辑。