uni-app picker 组件 mode为 date时报错

uni-app picker 组件 mode为 date时报错

操作步骤：

<picker mode="date" v-model="date">  
      <view class="uni-input">{{date}}</view>  
</picker>

预期结果：

正常使用


### 实际结果：

报错，并且页面卡死无法操作

bug描述：

picker mode=date 的时候报错，报错内容请查看附件。只有mode为date的时候报错，其他没问题


| 信息类别       | 信息内容   |
|----------------|------------|
| 产品分类       | uniapp/H5  |
| PC开发环境     | Windows    |
| PC开发环境版本 | win11      |
| 浏览器         | Chrome     |
| 浏览器版本     | Chrome 97.0.4692.71 (正式版本) （64 位） |
| 项目创建方式   | CLI        |
| CLI版本号      | 4.5.0      |

![Image](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20220105/e881656ef82218cd04c358d4189358a8.png)

![Image](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20220105/8a10a8c32c4eda3ef48a11f55f0d00d5.png)

### 相关链接：
- [问题链接](https://ask.dcloud.net.cn/question/138032)

更多关于uni-app picker 组件 mode为 date时报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

用示例代码hello uni-app能出现你的问题吗？ 不能的话你需要排查出来具体你哪个页面，甚至哪一行导致的。 找出来具体原因后提供一个能复现你描述的bug的最小化demo，让我们及时定位问题，及时修复。 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

更多关于uni-app picker 组件 mode为 date时报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你提供的错误信息和代码，问题出在 v-model 的使用上。picker 组件的 mode="date" 时，v-model 绑定的值必须是字符串类型，且格式应为 YYYY-MM-DD。

你的代码中 v-model="date" 绑定的 date 变量可能初始值类型不正确（比如是 null、undefined 或非字符串），导致组件内部解析出错，引发页面卡死。

解决方案：

  1. 确保 date 初始值为有效字符串： 在 data() 中初始化 date 为符合格式的字符串，例如：

    data() {
  return {
    date: '2023-01-01' // 默认值，格式必须为 YYYY-MM-DD
  }
}

  2. 如果使用动态值，请先格式化： 如果 date 来自后端或其他数据源，确保在赋值前转换为 YYYY-MM-DD 格式的字符串。

  3. 检查控制台报错： 错误截图显示的是框架内部错误，通常由数据格式问题引起。确保没有其他语法或数据异常。

修正后的代码示例：

<template>
  <picker mode="date" v-model="date">
    <view class="uni-input">{{ date || '请选择日期' }}</view>
  </picker>
</template>

<script>
export default {
  data() {
    return {
      date: '' // 初始化为空字符串，避免 null/undefined
    }
  }
}
</script>
回到顶部