uniapp组件uni-datetime-picker常见bug

1. 日期不显示或格式异常

• 现象：选择日期后输入框无显示，或显示格式与预期不符（如显示时间戳）。

• 原因 ：

  • 未正确绑定 v-model 值。
  • 未指定 type 参数（如需日期时间却用 type="date"）。

• 解决 ：

  <uni-datetime-picker 
    type="datetime" 
    v-model="selectedTime"
    :formatter="formatter"
  />

  在 formatter 方法中规范格式：

  formatter(type, value) {
    if (type === 'year-month') return `${value}年`;
    return value; // 其他类型按需处理
  }

---

2. iOS/Android/H5 平台表现不一致

• 现象：H5 正常但 App 端显示异常，或 iOS 与 Android 的弹窗样式不同。
• 原因 ：
  • 平台原生组件差异（如 App 端依赖原生控件）。
• 解决 ：

  • 统一处理 ：使用 #ifdef H5 和 #ifdef APP 区分平台逻辑。

  • 样式覆盖 ：通过 CSS 强制统一 UI：

    /* 覆盖原生弹窗样式 */
    uni-datetime-picker::v-deep .uni-ui-popper {
      font-family: sans-serif !important;
    }

---

3. value 绑定后无法修改

• 现象 ：通过代码修改 value 无效，组件显示值不变。
• 原因 ：
  • Vue 响应式失效（如直接修改数组索引）。
• 解决 ：

  • 使用深拷贝或 this.$set 触发响应：

    this.$set(this.formData, 'time', new Date().getTime());

---

4. 日期范围限制失效

• 现象 ：start 和 end 参数无法正确限制可选范围。

• 原因 ：

  • 参数格式错误（如用字符串而非时间戳）。

• 解决 ：

  <uni-datetime-picker 
    :start="1630000000000" 
    :end="1730000000000"
  />

  • 确保值为 数值型时间戳 ，可通过 new Date().getTime() 转换。

---

5. 弹出层被遮挡或位置错乱

• 现象：弹窗显示在屏幕外或被其他元素覆盖。

• 原因 ：

  • 父容器样式 overflow:hidden 或 z-index 冲突。

• 解决 ：

  /* 父级容器取消溢出隐藏 */
  .picker-container {
    overflow: visible;
    position: relative;
    z-index: 1001; /* 确保高于其他元素 */
  }

---

6. 事件不触发

• 现象 ：@change 事件无法响应选择操作。

• 原因 ：

  • 事件监听方式错误（如用 @change="handleChange()" 带括号）。

• 解决 ：

  <!-- 正确绑定：不带括号 -->
  <uni-datetime-picker @change="handleChange" />

  handleChange(e) {
    console.log(e); // e 为时间戳或格式化的字符串
  }

---

补充建议

• 版本兼容 ：定期更新 @dcloudio/uni-ui 至最新版。
• 真机测试：部分 BUG 仅出现在 App 端，需真机验证。
• 官方反馈 ：提交复现步骤至 uni-app GitHub Issues。