微信小程序使用picker实现时间和日期选择框功能【附源码下载】

更新时间：2017年12月11日 08:57:49 作者：FutrueJet

这篇文章主要介绍了微信小程序使用picker实现时间和日期选择框功能,结合实例形式分析了微信小程序picker组件进行日期与时间选择的相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下

本文实例讲述了微信小程序使用picker实现时间和日期选择框功能。分享给大家供大家参考，具体如下：

1、效果展示

2、关键代码

① index.wxml

<picker value="{{picker1Value}}" range="{{picker1Range}}" bindchange="normalPickerBindchange">
  当前城市选择：{{picker1Range[picker1Value]}}
</picker>
<picker mode="time" value="{{timeValue}}" start="00:00" end="24:00" bindchange="timePickerBindchange">
 当前时间选择: {{timeValue}}
</picker>
<picker mode="date" value="{{dateValue}}" start="1999-01-01" end="2999-12-12" bindchange="datePickerBindchange">
 当前日期选择: {{dateValue}}
</picker>

② index.js

Page({
 data:{
  // text:"这是一个页面"
  picker1Value:0,
  picker1Range:['北京','上海','广州','深圳'],
  timeValue:'08:08',
  dateValue:'2016-10-13'
 },
 normalPickerBindchange:function(e){
  this.setData({
   picker1Value:e.detail.value
  })
 },
 timePickerBindchange:function(e){
  this.setData({
   timeValue:e.detail.value
  })
 },
 datePickerBindchange:function(e){
  this.setData({
   dateValue:e.detail.value
  })
 }
})

3、源代码点击此处本站下载。

关于picker组件的详细介绍可参考官网：https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html

希望本文所述对大家微信小程序开发有所帮助。

您可能感兴趣的文章:

JavaScript实现栈结构Stack过程详解
这篇文章主要介绍了JavaScript实现栈结构Stack过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-03-03
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
下面小编就为大家带来一篇bootstrap的3级菜单样式,支持母版页保留打开状态实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
微信小程序 JS动态修改样式的实现代码
这篇文章主要介绍了微信小程序 JS动态修改样式的实现代码,原理是绑定数据，然后动态的修改数据，从而实现动态样式的改变而已,需要的朋友可以参考下
2017-02-02
javascript实现双端队列
这篇文章主要为大家详细介绍了使用javascript实现双端队列，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
不唐突的JavaScript的七条准则整理收集
在开始设计你的脚本之前，要考虑的第一件事情就是检查一下你要为其编写脚本的HTML代码，看看有什么东西可以帮助你达到目的。
2008-10-10
JavaScript实现页面定时刷新（定时器，meta）
很多朋友看到定时，很容易想到用js定时器，还有盆友用meta来设置，下面小编给大家介绍js实现页面定时刷新的方法，一起看看吧
2016-10-10
javascript拖拽效果延伸学习
这篇文章主要介绍了javascript拖拽效果延伸的学习，关于拖拽延伸出来的一些效果，感兴趣的朋友可以参考一下
2016-04-04
js实现旋转大风车
这篇文章主要为大家详细介绍了js实现旋转大风车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
JavaScript中利用构造器函数模拟类的方法
JavaScript中没有类的概念，所以其在对象创建方面与面向对象语言有所不同。这篇文章主要介绍了JavaScript中利用构造器函数模拟类的方法，文中给出了详细的示例代码和介绍，需要的朋友可以参考下，下面一起看看吧。
2017-02-02
javascript实现的固定位置悬浮窗口实例
这篇文章主要介绍了javascript实现的固定位置悬浮窗口,以一个完整实例形式详细分析了javascript实现固定位置悬浮窗口的相关技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04