uni-app中uni-datetime-picker选“年/月”后不选具体日期直接点确定会卡死/报错（PC浏览器、安卓、iOS均存在此bug）

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

uni-app中uni-datetime-picker选“年/月”后不选具体日期直接点确定会卡死/报错（PC浏览器、安卓、iOS均存在此bug）

操作步骤：

  • 创建空白项目——安装此组件——唤起年/月面板——“完成”——年月面板消失后直接点“确定”——出现bug

预期结果：

  • 无bug

实际结果：

  • pc端“确定”后弹窗未关闭，无法直接看见model值，蓝圈框住许多非法日期；
  • 移动端“确定”后弹窗关闭，但v-model无值，页面直接卡死，点什么都没反应了

bug描述：

  • 我关注到网上有很多人反映这个问题，但似乎并没有完全修好。
  • 已经在插件市场拉取了最新的组件代码，并且也没有使用scol-view等标签包裹。
  • 源码也截图乐，可以看到，我就是单纯的使用了这个组件，并没有多余的操作。
  • 浏览器bug后尚且可以关掉弹窗，但移动端bug后会直接把界面都卡死

图片

Image 1 Image 2 Image 3 Image 4 Image 5 Image 6 Image 7


Harmonyos Next教程
4 回复

感谢反馈，正在查找是哪里出现问题


你好，尝试将：uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js
这个文件替换为下面的附件中的文件
修改之后的效果是：出现这种不选择日期就点击确定的情况，则会返回当前日期

好了，万分感谢

在uni-app中使用uni-datetime-picker组件时，如果选择“年/月”模式后不选具体日期直接点击确定按钮导致卡死或报错的问题，通常是由于组件内部逻辑处理不当或事件绑定有误引起的。为了解决这个问题，我们可以尝试通过监听组件的事件并手动处理来确定按钮点击时的逻辑。

以下是一个简化的代码示例，展示如何在uni-datetime-picker组件中选择“年/月”模式后，即使不选择具体日期也能正确处理确定按钮的点击事件，避免卡死或报错。

<template>
  <view>
    <uni-datetime-picker
      type="datetime"
      mode="year-month"
      :value="dateValue"
      @change="onDateChange"
      @confirm="onConfirm"
      @cancel="onCancel"
    ></uni-datetime-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dateValue: '' // 初始化日期值
    };
  },
  methods: {
    // 日期变化时触发
    onDateChange(event) {
      this.dateValue = event.detail.value;
    },
    // 确定按钮点击时触发
    onConfirm(event) {
      // 检查dateValue是否为空或无效，如果是则进行相应处理
      if (!this.dateValue) {
        uni.showToast({
          title: '请选择年月',
          icon: 'none'
        });
        return;
      }
      // 正常情况下处理选中的年月值
      console.log('选中的年月:', this.dateValue);
      // 这里可以添加进一步处理逻辑，如提交数据等
    },
    // 取消按钮点击时触发
    onCancel() {
      this.dateValue = ''; // 清空选中的日期值
      console.log('取消了选择');
    }
  }
};
</script>

<style scoped>
/* 添加样式（如果需要） */
</style>

在这个示例中，我们使用了uni-datetime-picker组件的change、confirm和cancel事件。特别是confirm事件中，我们检查dateValue是否为空或无效，如果为空则显示一个提示信息并返回，避免进一步处理可能导致的问题。这样，即使用户在没有选择具体日期的情况下点击了确定按钮，应用也不会卡死或报错。

注意，实际项目中可能需要根据具体需求调整日期格式和处理逻辑。此外，确保uni-app和相关依赖库更新到最新版本，有时候这类问题在新版本中可能已经被修复。

回到顶部