uni-app 日历组件uni-calendar 顶部切换时间时，2024-01切换会跳过2023年

uni-app 日历组件uni-calendar 顶部切换时间时，2024-01切换会跳过2023年

项目信息 详细信息
产品分类 uniapp/H5
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 macOS 14.0 (23A344)
浏览器平台 Chrome
浏览器版本 120.0.6099.199（正式版本） (x86_64)
项目创建方式 CLI
CLI版本号 @vue/cli 5.0.8

示例代码：

<template>
<view @click="openC">打开日历</view>
<uni-calendar ref="calendar" :range="true" :insert="false" @confirm="confirm" @close="close" />
</template>  
<script setup>
const calendar = ref();
function openC() {
calendar.value.open();
}
function confirm(e) {
console.log('111111 e =', e);
}
function close() {}
</script>

操作步骤：

2024-01点击左边箭头往前切换

预期结果：

显示2023-12

实际结果：

显示2022-12

bug描述：

日历组件，顶部左右箭头切换月份的时候，2024-01往前切换是2022-12而不是2023-12。具体操作见视频附件

视频附件


更多关于uni-app 日历组件uni-calendar 顶部切换时间时，2024-01切换会跳过2023年的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 日历组件uni-calendar 顶部切换时间时，2024-01切换会跳过2023年的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-calendar 组件时，如果你发现从 2024-01 切换时间时会跳过 2023 年，这可能是由于组件的默认行为或配置问题导致的。以下是一些可能的解决方案和排查步骤：

1. 检查 uni-calendar 的版本

确保你使用的 uni-calendar 组件是最新版本。旧版本可能存在一些已知的 bug，更新到最新版本可能会解决这个问题。

2. 检查 start-date 和 end-date 配置

uni-calendar 组件通常有 start-date 和 end-date 属性，用于设置日历的可选日期范围。确保这些配置没有限制你切换到 2023 年。

<uni-calendar :start-date="'2020-01-01'" :end-date="'2030-12-31'"></uni-calendar>

3. 检查 default-date 配置

如果你设置了 default-date，确保它不会影响日期的切换行为。

<uni-calendar :default-date="'2024-01-01'"></uni-calendar>

4. 监听日期切换事件

你可以通过监听日期切换事件来检查切换过程中的逻辑是否正确。

<uni-calendar @change="handleDateChange"></uni-calendar>

methods: {
  handleDateChange(date) {
    console.log('日期切换至:', date);
    // 你可以在这里添加自定义逻辑
  }
}

5. 自定义日期切换逻辑

如果默认的日期切换逻辑不符合你的需求，你可以考虑自定义日期切换逻辑。例如，你可以通过手动设置日期来避免跳过某些年份。

methods: {
  changeDate(year, month) {
    this.selectedDate = `${year}-${month}-01`;
    // 更新日历组件的日期
    this.$refs.calendar.setDate(this.selectedDate);
  }
}

6. 检查是否有其他逻辑干扰

确保你的代码中没有其他逻辑干扰了日期的切换。例如，某些事件监听器或条件判断可能会导致日期切换的异常行为。

7. 查看官方文档和社区

如果以上方法都无法解决问题，建议查看 uni-calendar 的官方文档或在社区中搜索类似的问题。可能有其他开发者遇到并解决了相同的问题。

示例代码

以下是一个完整的示例代码，展示了如何使用 uni-calendar 并监听日期切换事件：

<template>
  <view>
    <uni-calendar 
      ref="calendar"
      :start-date="'2020-01-01'"
      :end-date="'2030-12-31'"
      :default-date="'2024-01-01'"
      @change="handleDateChange"
    ></uni-calendar>
  </view>
</template>

<script>
export default {
  methods: {
    handleDateChange(date) {
      console.log('日期切换至:', date);
      // 你可以在这里添加自定义逻辑
    },
    changeDate(year, month) {
      this.selectedDate = `${year}-${month}-01`;
      // 更新日历组件的日期
      this.$refs.calendar.setDate(this.selectedDate);
    }
  }
}
</script>
回到顶部