您的位置:首页 > 移动开发 > 微信开发

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

2017-12-27 16:33 1136 查看
<!--时间选择器 -->
<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 官方文档 比较细腻

眼看十遍,不如手巧十遍
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  小程序