view-design日期时间筛选。如果不选择时间默认开始时间是00:00:00.结束时间默认23:59:59
<template> <DatePicker type="daterange" v-model="dateRange" placeholder="请选择日期范围" @on-change="handleDateChange" style="width: 300px" ></DatePicker> </template> <script> export default { data() { return { dateRange: [], // 绑定的日期范围 startTime: '', // 实际开始时间(含默认) endTime: '' // 实际结束时间(含默认) } }, methods: { handleDateChange(date) { if (date && date.length === 2) { // 用户选择了日期范围 this.startTime = new Date(date[0]).setHours(0, 0, 0, 0); this.endTime = new Date(date[1]).setHours(23, 59, 59, 999); } else { // 未选择时,默认当天全天 const today = new Date(); this.startTime = new Date(today).setHours(0, 0, 0, 0); this.endTime = new Date(today).setHours(23, 59, 59, 999); } // 转换为可读格式(可选) console.log('开始时间:', new Date(this.startTime)); console.log('结束时间:', new Date(this.endTime)); // 调用查询接口 this.fetchData(); }, fetchData() { // 发送请求时使用 this.startTime 和 this.endTime // 示例:API 请求 this.$http.get('/api/data', { params: { start_time: this.startTime, end_time: this.endTime } }); } }, mounted() { // 初始化默认时间(当天) this.handleDateChange(); } } </script>