uni-app的picker选择后无法输出完整值

uni-app的picker选择后无法输出完整值

开发环境 版本号 项目创建方式
Mac macOS bigsur 11.6 HBuilderX

操作步骤：

  • 选择年份月份

预期结果：

  • 输出格式为2021-10

实际结果：

  • 2021

bug描述：

picker设置mode为date，默认值:start=“2021-10”，代码如下：

<picker  
    mode="date"  
    :start="curMonth"  
    :fields="month"  
    @change="bindDateChange"  
>  
    <view  
    >{{ curMonth }}<span class="iconfont icon-arrow-down"></span  
    ></view>  
</picker>

bindDateChange(e) {  
    const value = e.detail.value;  
    console.log(e);  
    console.log(value);  
},

当我选择改变picker的值，触发bindDateChange函数，e.detail.value返回的值只有“2021”，没有后面的月份。

zUcfeL


更多关于uni-app的picker选择后无法输出完整值的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

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

更多关于uni-app的picker选择后无法输出完整值的实战教程也可以访问 https://www.itying.com/category-93-b0.html


复现了，应该去掉冒号，写成fields=“month”。 感谢解答。

问题出在 fields 属性的设置上。在 mode="date" 时，fields 属性控制 picker 的粒度，你设置为 month 后，picker 会显示年月选择器，但 e.detail.value 返回的格式仍然是完整日期（如 “2021-10-01”），而不是你期望的 “2021-10”。

解决方案：

  1. 调整 fields 值： 将 fields 设置为 "month"（注意是字符串）是正确的，但需要正确处理返回值。

  2. 修改 bindDateChange 方法： 从返回值中提取年月部分。

bindDateChange(e) {  
    const fullDate = e.detail.value; // 格式如 "2021-10-01"
    const yearMonth = fullDate.substring(0, 7); // 提取 "2021-10"
    console.log(yearMonth);
    this.curMonth = yearMonth; // 更新显示
}
  1. 确保初始值格式匹配： curMonth 初始值应为 “2021-10-01”（完整日期），这样 picker 才能正确解析。如果只想显示年月，可以在数据层存储完整日期，显示时截取。
data() {
    return {
        curMonth: '2021-10-01' // 存储完整日期
    }
}

显示时只展示年月：

<view>{{ curMonth.substring(0, 7) }}</view>
回到顶部