uni-app picker组件的start和end属性无效

uni-app picker组件的start和end属性无效

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
### picker的start和end无效

在APP端不加`fields="day"`时有效，若加了，也无效。

微信小程序和H5端，无论加不加，起止日期都无效。

#### 示例代码：

```html
<picker class="label" mode="date" fields="day" start="2000-01-01" end="2020-01-01"  
    :value="birthday">  
    <view class="label">{{birthday}}</view>  
</picker>

操作步骤：

  • APP端，加fields="day"时无效，不加有效。其他端都无效。

预期结果：

  • 都要有效

实际结果：

  • APP端，加fields="day"时无效，不加有效。其他端都无效。

更多关于uni-app picker组件的start和end属性无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

未复现此问题。用示例代码hello uni-app能出现你的问题吗？ 不能的话你需要排查出来具体你哪个页面，甚至哪一行导致的。 找出来具体原因后提供一个能复现你描述的bug的最小化demo，让我们及时定位问题，及时修复。

更多关于uni-app picker组件的start和end属性无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


报歉，看错了，实际是：控件中会显示范围之外的年份，但是选不上去，之前只是看到有之外的年份。
不过还是建议，把范围之外的年份也不显示。

这是一个已知的跨端兼容性问题，主要原因是不同平台对picker组件的start和end属性支持程度不同。

问题分析：

  1. 微信小程序限制：微信小程序原生的picker组件在设置fields="day"（选择年月日）时，确实不支持start和end属性限制日期范围。这是微信小程序平台的限制，uni-app无法绕过。

  2. H5端差异：H5端使用的是浏览器原生的input[type=“date”]，其日期范围限制的实现方式与小程序不同，导致属性支持不完整。

  3. APP端行为：APP端（iOS和Android）在不同情况下表现不同，这是因为底层原生控件的差异。

解决方案：

  1. 使用range属性替代（推荐）：

    <picker mode="date" :range="dateRange" :value="birthday">
  <view>{{birthday}}</view>
</picker>

    data() {
  return {
    dateRange: ['2000-01-01', '2020-01-01'],
    birthday: ''
  }
}

  2. 使用条件编译处理平台差异：

    <!-- #ifdef APP-PLUS -->
<picker mode="date" fields="day" :start="startDate" :end="endDate" :value="birthday">
<!-- #endif -->
<!-- #ifndef APP-PLUS -->
<picker mode="date" fields="day" :value="birthday" [@change](/user/change)="dateChange">
<!-- #endif -->
回到顶部