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


Posted in Javascript onDecember 11, 2017

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

1、效果展示

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

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 相关文章推荐
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
浅析vue-router原理
Oct 19 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
Mac中安装nvm的教程分享
Dec 11 #Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 #jQuery
基于dataset的使用和图片延时加载的实现方法
Dec 11 #Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 #Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 #Javascript
Node.js中sequelize时区的配置方法
Dec 10 #Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 #Javascript
You might like
在PHP中使用模板的方法
2008/05/24 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
Python AES加密实例解析
2018/01/18 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
python如何实现代码检查
2019/06/28 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
会计毕业生求职简历的自我评价
2013/10/20 职场文书
护理专科自荐书范文
2014/02/18 职场文书
入党自荐书范文
2015/03/05 职场文书
小学教师岗位职责
2015/04/02 职场文书
2015年教研工作总结
2015/05/23 职场文书
教师节领导致辞
2015/07/29 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书