uni-app 官方组件vue3.0版本picker组件mode为“date”时移动端默认值value不回显

uni-app 官方组件vue3.0版本picker组件mode为“date”时移动端默认值value不回显

操作步骤：

  • picker官方组件示例

预期结果：

  • picker组件，mode为date时，设置value可以同步到picker当前选中值

实际结果：

  • picker组件，mode为date时，设置value 只回显年，月和日显示01-01，但是点击完成回调返回今天

bug描述：

  • 官方演示模板vue3.0，使用picker组件，mode为date时设置value不生效

相关链接：

图片

alt text

信息项 详细信息
产品分类 uniapp/H5
PC开发环境操作系统 Windows
HBuilderX类型 正式
HBuilderX版本号 3.2.3
浏览器平台 微信内置浏览器
浏览器版本 所有的
项目创建方式 HBuilderX

更多关于uni-app 官方组件vue3.0版本picker组件mode为“date”时移动端默认值value不回显的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

未复现此问题，请提供录屏上传附件看下表现

更多关于uni-app 官方组件vue3.0版本picker组件mode为“date”时移动端默认值value不回显的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 uni-app 官方组件在 Vue 3 环境下的兼容性问题。当 picker 组件的 mode 设置为 “date” 时，通过 value 属性设置的初始值在移动端无法正确回显，仅年份显示正确，月份和日期会错误地显示为 01-01。

问题原因： 该问题源于 Vue 3 版本下 picker 组件内部对日期格式的处理逻辑存在缺陷。组件未能正确解析和绑定传入的 value 值（通常为 “YYYY-MM-DD” 格式字符串），导致界面显示异常。

临时解决方案：

  1. 使用 ref 手动设置值：通过 picker 组件的 ref，在页面显示时手动触发其内部更新。

    <template>
  <picker mode="date" :value="dateValue" @change="onDateChange" ref="datePicker">
  </picker>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const dateValue = ref('2023-10-01')
const datePicker = ref()

onMounted(() => {
  // 手动触发更新
  if (datePicker.value) {
    datePicker.value.setValue([2023, 10, 1])
  }
})
</script>

  2. 监听组件就绪事件：利用 picker 的 mounted 事件或结合 nextTick 确保组件渲染完成后设置值。

    <template>
  <picker mode="date" :value="dateValue" @change="onDateChange" @mounted="onPickerReady">
  </picker>
</template>
<script setup>
import { ref, nextTick } from 'vue'
const dateValue = ref('2023-10-01')

const onPickerReady = () => {
  nextTick(() => {
    // 可在此处通过 ref 手动设置值
  })
}
</script>
回到顶部