uni-app中start如果设置了日期+时间,则选择一个时间范围后结束日期的时间不对,变成开始日期的时间了

发布于 1周前 作者 yuanlaile 来自 Uni-App

uni-app中start如果设置了日期+时间,则选择一个时间范围后结束日期的时间不对,变成开始日期的时间了

Image

Image

Image


5 回复

你好,可以尝试将下方的vue文件替换uni-datetime-picker.vue,之后会更新插件
临时方案:替换如下文件:


nice!解决速度非常快!!

回复 1***@qq.com: 好的,如果你还发现存在什么问题,可以在这下面反馈

感谢反馈,已复现问题,正在查找是什么原因导致的

在uni-app中处理日期时间选择器时,确实可能会遇到一些时间范围选择的问题。如果你发现设置了一个包含日期和时间的起始点后,在选择时间范围时结束日期的时间部分被重置为起始日期的时间,这通常是因为日期时间选择器组件没有正确处理时间部分。

为了解决这个问题,我们需要确保在选择时间范围时,起始日期和结束日期的时间部分被正确处理。以下是一个示例代码,展示了如何在uni-app中使用<picker>组件选择日期时间范围,并确保结束日期的时间部分不被重置。

<template>
  <view>
    <picker mode="datetime" fields="date,time" :start="startDate" :end="endDate" @change="onDateTimeChange">
      <view class="picker">
        {{ startDateStr }} - {{ endDateStr }}
      </view>
    </picker>
    <button @click="showDateTimeRangePicker">选择时间范围</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startDate: new Date().getTime() - 3600 * 1000 * 24, // 设置为当前时间的前一天
      endDate: new Date().getTime(), // 当前时间
      startDateStr: '',
      endDateStr: ''
    };
  },
  methods: {
    formatDate(time) {
      const date = new Date(time);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    onDateTimeChange(e) {
      const values = e.detail.value;
      this.startDate = values[0];
      this.endDate = values[1];
      this.startDateStr = this.formatDate(this.startDate);
      this.endDateStr = this.formatDate(this.endDate);
    },
    showDateTimeRangePicker() {
      // 打开选择器(uni-app的picker组件通常不需要手动触发显示,这里仅作为示例按钮)
      // 实际情况下,用户交互(如点击)会自动触发picker的显示
    }
  }
};
</script>

<style>
.picker {
  padding: 20px;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  text-align: center;
}
</style>

在这个示例中,我们使用了<picker>组件的datetime模式,并设置了fields属性为date,time来同时选择日期和时间。startDateendDate分别表示起始日期和结束日期的时间戳。onDateTimeChange方法会在用户选择日期时间后被调用,更新startDateendDate的值,并格式化显示。

确保在组件的data中正确初始化startDateendDate,并且时间范围的选择逻辑没有覆盖或重置结束日期的时间部分。

回到顶部