在微信小程序中实现时间日期的选择，并且显示当前选择的时间日期

最新推荐文章于 2025-06-14 14:18:53 发布

原创最新推荐文章于 2025-06-14 14:18:53 发布 · 3.6w 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了微信小程序中时间选择器组件的使用方法，包括如何设置有效时间范围、绑定事件处理函数等，并提供了完整的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--时间选择器 -->
<view
class=''>选择时间></view>
<picker
mode="time"
value='{{time}}'
start="09:01"
end="21:01"
bindchange='bindTimeChange'
>
<view>当前选择:{{time}}</view>
</picker>
</form>


使用了官方自带的picker标签
start

表示有效时间范围的开始，字符串格式为"hh:mm"

end

表示有效时间范围的结束，字符串格式为"hh:mm"

bindchange

value 改变时触发 change 事件

我们定义了一个bindTimeChange事件接下来我们在js文件中：
bindTimeChange:function(e){
//设置事件
this.setData({
//给当前time进行赋值
time:e.detail.value
})
}
在这里我们在上面定义一个time="09：04" 默认设置成九点4分


接下来我们的时间选择就ok了


https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html
 官方文档 比较细腻 

眼看十遍，不如手巧十遍