elementui 开始结束时间可以选择同一天不同时间段

在Element UI的<el-date-picker>组件中，要实现同一天内可选择不同的开始和结束时间，你需要设置type属性为datetimerange，并通过picker-options限制结束时间必须在开始时间之后。

以下是一个简单的例子：

<template>
  <el-date-picker
    v-model="timeRange"
    type="datetimerange"
    :picker-options="pickerOptions"
    range-separator="至"
    start-placeholder="开始日期时间"
    end-placeholder="结束日期时间"
    align="right"
  >
  </el-date-picker>
</template>
 
<script>
export default {
  data() {
    return {
      timeRange: [],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    };
  },
  watch: {
    timeRange(newVal) {
      if (newVal && newVal.length === 2) {
        const [start, end] = newVal;
        if (start && end) {
          const startDate = new Date(start).setHours(0, 0, 0, 0);
          const endDate = new Date(end).setHours(0, 0, 0, 0);
          if (startDate > endDate) {
            this.$message.error('结束时间需大于开始时间');
            this.timeRange = []; // 重置时间范围
          }
        }
      }
    }
  }
};
</script>

在这个例子中，我们使用了datetimerange类型的<el-date-picker>来选择一个时间范围。我们还设置了一个watcher来监控选中的时间范围，并在结束时间小于开始时间时给出错误提示，并重置时间范围。这样用户就不能选择开始时间超过结束时间的情况。