elementplus时间范围选择

### Element Plus 时间范围选择器使用教程 #### 创建时间范围选择器组件 为了创建一个可以选取时间段的选择器，`Element Plus` 提供了 `el-date-picker` 组件，并通过设置属性来实现特定功能。对于时间范围选择而言，重要的是要配置 `type` 属性为 `"datetimerange"` 或者其他适合的时间间隔类型。 ```html <template> <div class="block"> <span class="demonstration">默认</span> <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"> </el-date-picker> </div> </template> <script setup> import { ref } from 'vue' const value1 = ref('') </script> ``` 此代码片段展示了如何定义一个基本的时间范围选择器[^1]。 #### 处理时区差异问题 当遇到由于不同地区标准时间而导致的时间显示不一致的情况时，可以通过调整 API 请求中的参数或者修改本地 JavaScript 的 Date 对象处理逻辑来解决这个问题。如果是在 Vue3 和 Element-Plus 中遇到了类似相差8小时的问题，则可能是因为浏览器自动应用了用户的本地时区偏移量造成的[^2]。 针对此类情形的一个解决方案是，在发送数据到服务器之前手动转换成 UTC 时间戳： ```javascript function convertToUTC(dateString){ let date = new Date(dateString); return new Date( date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds() ); } ``` 这有助于确保前后端之间传递的数据保持一致性。 #### 自定义快捷选项 为了让用户体验更加友好，还可以自定义一些常用的快速选择项给用户提供便利。比如预设今天、昨天、近一周等常用区间作为快捷方式。 ```html <template> <!-- ... --> <el-date-picker ... :picker-options="pickerOptions"> </el-date-picker> </template> <script setup> //... const pickerOptions = { shortcuts: [{ text: '最近一周', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', [start, end]); } }, { text: '最近一个月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit('pick', [start, end]); } }] }; </script> ``` 上述例子中增加了两个快捷按钮：“最近一周”和“最近一个月”，方便用户更加快捷地完成操作。