view-design的日期时间插件怎么在只选择日期没有选时间的时候给他默认的时间

发布于:2025-06-27 ⋅ 阅读:(14) ⋅ 点赞:(0)

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>


网站公告

今日签到

点亮在社区的每一天
去签到