uni-app uni-datetime-picker 日期可选范围存在BUG

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

uni-app uni-datetime-picker 日期可选范围存在BUG

示例代码：

<uni-datetime-picker type="date" :clear-icon="false" :start="2024-09-28" end="2024-10-05" v-model="form.date" />

操作步骤：

  • 执行代码，可见BUG描述中附件图片所示。

预期结果：

  • 9月28日~10月5日应当全部为黑色

实际结果：

  • 操作1——月份选择9月，9月28日~9月30日【黑色】，10月1日~10月5日【灰色】；
  • 操作2——月份选择10月，9月28日~9月30日【灰色】，10月1日~10月5日【黑色】

bug描述：

uni-datetime-picker，可选日期为2024年9月28日到10月05日，而页面中9月显示仅28、29、30可选，切换到10月仅显示1~5号可选，会让用户在九月误以为10月的日期均不可用。

附件图片：

Image 1

Image 2


Harmonyos Next教程
1 回复

针对您提到的 uni-app 中 uni-datetime-picker 组件日期可选范围存在BUG的问题，这里提供一个基本的代码示例来展示如何设置日期可选范围，并尝试通过代码逻辑来规避可能的BUG。请注意，由于具体的BUG细节未提及，以下代码旨在展示如何正确设置日期范围，并包含一些常见问题的处理思路。如果BUG依然存在，建议查阅官方文档或提交issue到uni-app社区。

示例代码

首先，确保你的项目已经安装了 uni-app 和 uni-ui（如果uni-datetime-picker是从uni-ui中引入的）。

<template>
  <view>
    <uni-datetime-picker
      type="datetime"
      :start="startDate"
      :end="endDate"
      @change="onDateChange"
    ></uni-datetime-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startDate: '2023-01-01T00:00:00', // 开始日期
      endDate: '2023-12-31T23:59:59',   // 结束日期
      selectedDate: ''                  // 选中的日期
    };
  },
  methods: {
    onDateChange(event) {
      this.selectedDate = event.detail.value;
      console.log('Selected Date:', this.selectedDate);
      
      // 这里可以添加额外的逻辑来验证选中的日期是否在范围内
      // 例如，如果因为某些原因组件未正确限制日期范围，手动校验
      const selected = new Date(this.selectedDate);
      const start = new Date(this.startDate);
      const end = new Date(this.endDate);
      
      if (selected < start || selected > end) {
        console.error('Selected date is out of range!');
        // 可以重置日期或进行其他错误处理
        // this.selectedDate = this.startDate; // 例如重置为开始日期
      }
    }
  }
};
</script>

<style>
/* 添加你的样式 */
</style>

注意事项

  1. 时间格式：确保startDate和endDate的时间格式与uni-datetime-picker组件要求的格式一致（通常为ISO 8601格式）。
  2. 手动校验：虽然组件应该自动处理日期范围，但添加手动校验可以作为额外的保障，特别是当遇到BUG时。
  3. 更新与反馈：如果上述方法不能解决你遇到的问题，建议检查uni-app和uni-ui的最新版本，看是否有相关的修复。同时，可以在uni-app的GitHub仓库或社区论坛提交issue。

通过上述代码和注意事项，希望能帮助你更好地管理和使用uni-datetime-picker组件的日期范围功能。

回到顶部