VUE3+elementUI 日期时间组件筛选时区分区间 el-date-picker

在Vue 3和Element UI中，可以使用el-date-picker组件的type属性为datetimerange以支持日期时间范围选择。若需要对筛选的日期时间区间进行区分，可以通过监听该组件的change事件来实现。

以下是一个简单的例子，展示了如何使用el-date-picker组件筛选日期时间区间，并在变化时输出开始和结束时间。

<template>
  <el-date-picker
    v-model="dateRange"
    type="datetimerange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    @change="handleDateChange"
  >
  </el-date-picker>
</template>
 
<script setup>
import { ref } from 'vue';
 
const dateRange = ref([]);
 
const handleDateChange = (value) => {
  if (value && value.length === 2) {
    const [start, end] = value;
    console.log('开始时间:', start);
    console.log('结束时间:', end);
  }
};
</script>

在这个例子中，dateRange是一个双向绑定的数据，它将保存选定的日期时间范围。handleDateChange方法会在用户更改选择的日期时间范围时被调用，并输出新的开始和结束时间。注意，Element UI的版本需要与Vue 3兼容。