uni-app h5下picker日期选择的start与end无效果

uni-app h5下picker日期选择的start与end无效果

详细问题描述

uniapp下使用picker，但是配置的start与end没有效果，代码如下：

<picker @change="bindDateChange" mode="date" start="2001-01-01" end="2030-01-01">  
    <text class="form-placeholder-class">证件有效期开始日期</text>  
</picker>

实际打开的页面交没有生效，还是从默认的1870-2170，现在领导提意见了，怎么办~

[内容]

重现步骤

[步骤]

[结果]

[期望]

[如果语言难以表述清晰，拍一个视频或截图，有图有真相]

IDE运行环境说明

环境 说明
IDE版本号 HBuilderX 2.6.11
windows版本号
mac版本号 10.14.16

uni-app运行环境说明

环境 说明
运行端是h5或app或某个小程序？ h5
运行端版本号
项目是cli创建的还是HBuilderX创建的？ HBuilderX创建的
编译模式说明：自定义组件模式？纯nvue模式？v3模式？

App运行环境说明

环境 说明
Android版本号
iOS版本号
手机型号
模拟器型号

附件

附件 说明
IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志，点右键打开文件所在目录，将log文件压缩成zip包上传
App问题请提供可重现问题的代码片段，你补充的细一点，问题就解决的快一点
App安装包或H5地址
可重现代码片段

联系方式

[QQ]


更多关于uni-app h5下picker日期选择的start与end无效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

问题很急的话，自己先封装一个

更多关于uni-app h5下picker日期选择的start与end无效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不会吧一个月还没解决，我今天也遇到了

可不止一个月，我当这帖子的时候，就已经有人发贴子了，而且也没解决~

start 与 end 不是限制的显示，是限制的选择

那也是bug啊，这个组件不能自定义开始的时间与结束的时间啊，比如我想让picker显示的范围是：2020年1月1日开始到2030年12月31日，这个有没有办法实现？

那是bug吧，别说限制显示，我这连限制选择都不行

在uni-app的H5环境下，picker组件的start和end属性确实存在兼容性问题。这是因为H5平台使用的是浏览器原生input[type=date]实现的，而原生日期选择器的限制范围在不同浏览器中表现不一致。

解决方案：

  1. 对于H5平台，建议改用uni-datetime-picker组件，它提供了更好的跨平台兼容性：
<uni-datetime-picker 
  type="date"
  :start="2001-01-01"
  :end="2030-01-01"
  [@change](/user/change)="bindDateChange"
/>
  1. 如果必须使用picker组件，可以通过条件编译处理：
<!-- #ifdef H5 -->
<input type="date" min="2001-01-01" max="2030-01-01" [@change](/user/change)="bindDateChange">
<!-- #else -->
<picker mode="date" start="2001-01-01" end="2030-01-01" [@change](/user/change)="bindDateChange">
  <text class="form-placeholder-class">证件有效期开始日期</text>
</picker>
<!-- #endif -->
回到顶部