element时间区间选择器

ElementUI库中提供了一个时间区间选择器组件（el-date-picker），可以用于选择日期和时间区间。以下是一个简单的示例代码：

<template>
  <div>
    <el-date-picker
      v-model="dateRange"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
      @change="handleChange"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateRange: [], // 选中的时间区间
      pickerOptions: {
        disabledDate(time) {
          // 禁用今天之后的日期
          return time.getTime() > Date.now();
        }
      }
    };
  },
  methods: {
    handleChange(value) {
      console.log("选中的时间区间：", value);
    }
  }
};
</script>

在上面的示例代码中，我们使用了el-date-picker组件，并指定type为datetimerange，表示选择日期和时间区间。通过v-model指令实现双向绑定，将选中的时间区间绑定到dateRange变量上。我们还可以通过range-separator属性指定区间分隔符，start-placeholder和end-placeholder属性指定起始和结束日期的占位符文本。

在pickerOptions对象中，我们可以指定一些选项来自定义时间区间选择器的行为。例如，在disabledDate方法中，我们禁用了今天之后的所有日期，使得用户无法选择未来的日期。

最后，在@change事件中，我们可以获取到选中的时间区间，并进行相应的处理。