el-date-picker datetimerange

### 关于 `el-date-picker` 组件中 `datetimerange` 类型的使用 #### 基本用法 在Element UI框架内，`<el-date-picker>`组件支持多种时间/日期选择模式，其中`type="datetimerange"`用于选取一段连续的时间范围。此类型的配置允许用户在一个控件里同时挑选起始时间和结束时间。 对于`datetimerange`类型的选择器而言，HTML结构如下所示： ```html <el-date-picker v-model="dateTimeRange" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> ``` 上述代码片段展示了如何创建一个基本的`datetimerange`选择框[^1]。 #### 自定义选项设置 为了满足特定业务逻辑需求，可以通过`:picker-options`属性来定制更多细节，比如禁用某些不可选中的时段。下面是一个例子说明怎样通过JavaScript对象传递参数给`pickerOptions`以实现这一目的: ```javascript data() { return { dateTimeRange: '', pickerOptions: { disabledDate(time) { // 这里的条件可以根据实际场景调整 return time.getTime() < Date.now() - 8.64e7; } } }; } ``` 这段脚本设置了只有今天之后的日子才能被选择作为有效区间的一部分[^2]。 #### 添加特殊标记 如果希望对含有记录的具体日子加以标注，则可以利用dayjs库配合自定义渲染函数完成该操作。具体做法是在初始化页面时加载相关数据并处理成适合显示的形式；接着，在模板部分调用这些经过加工后的信息来进行视觉上的增强。 ```vue <script setup> import { ref, onMounted } from 'vue'; import dayjs from 'dayjs'; const markedDates = ref([]); onMounted(() => { fetch('/api/getMarkedDays') .then(response => response.json()) .then(data => { const datesWithRecords = data.map(item => item.date); markedDates.value = datesWithRecords; }); }); </script> <template> <div> <!-- ...其他组件... --> <el-date-picker v-model="selectedDateTimeRange" type="datetimerange" :cell-class-name="(date) => (markedDates.includes(dayjs(date).format('YYYY-MM-DD')) ? 'has-data' : '')" @change="handleSelectionChange"> </el-date-picker> <!-- ...其他组件... --> </div> <style scoped> .has-data::after { content: ''; display: block; width: 6px; height: 6px; background-color: red; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); border-radius: 50%; } </style> </template> ``` 这里展示了一个完整的Vue单文件组件实例，它不仅实现了基础的功能还加入了针对已知重要事件日志的小红点提示效果[^3]。