uni-app #插件讨论# uni-datetime-picker 日期选择器 - DCloud前端团队 关于动态切换type

uni-app #插件讨论# uni-datetime-picker 日期选择器 - DCloud前端团队 关于动态切换type

问题描述

结束日期 的 type 值从 date 改为 datetime 时，样式和功能正常，但从 datetime 改为 date 时，样式未更新，仍然可以选择时间。

<uni-forms-item label="結束日期" label-position="left" name="DATE_END" required>  
<uni-datetime-picker :type="datetype" :start="today" placeholder="結束時間" v-model="vinfo.DATE_END"  
disabled="visReadonly" confirmType="next" @change="countingholidays">
</uni-datetime-picker>
</uni-forms-item>

更多关于uni-app #插件讨论# uni-datetime-picker 日期选择器 - DCloud前端团队 关于动态切换type的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

确认bug，下一版本修复, 临时解决可以将 uni-datetime-picker 的相关代码改为： type: {
immediate: true,
handler(newVal, oldVal) {
if (newVal.indexOf(‘time’) !== -1) {
this.hasTime = true
} else {
this.hasTime = false
}
if (newVal.indexOf(‘range’) !== -1) {
this.isRange = true
} else {
this.isRange = false
}
}
} bug 已处理，更新一下

更多关于uni-app #插件讨论# uni-datetime-picker 日期选择器 - DCloud前端团队 关于动态切换type的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢

这是一个已知的组件内部状态同步问题。当 type 从 datetime 切换为 date 时，组件内部的模式状态未能及时更新。

解决方案：

  1. 使用 key 强制重新渲染：最直接有效的方法是为组件绑定一个与 type 相关的 key。当 type 改变时，key 变化会触发组件完全重新创建，从而重置内部状态。

    <uni-datetime-picker
  :key="datetype"
  :type="datetype"
  ...其他属性
>
</uni-datetime-picker>

  2. 在修改 type 后重置值：如果不想使用 key，可以在改变 datetype 的代码逻辑中，先将 vinfo.DATE_END 重置为 null 或 undefined，然后在 $nextTick 中重新赋所需值（如果需要），这也能促使组件重新初始化。

    // 假设这是切换type的方法
changeType() {
  this.datetype = 'date'; // 切换为date
  this.vinfo.DATE_END = null; // 先清空值
  this.$nextTick(() => {
    // 如果需要，可以在这里重新设置一个日期值
    // this.vinfo.DATE_END = '2023-10-01';
  });
}
回到顶部