微信小程序使用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 相关文章推荐
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
JS实现轮播图效果
Jan 11 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
微信小程序调用后台service教程详解
Nov 06 Javascript
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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
Python 专题四 文件基础知识
2017/03/20 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
python写程序统计词频的方法
2019/07/29 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
管理学专业个人求职信范文
2013/09/21 职场文书
学生的自我鉴定范文
2013/10/24 职场文书
学校办公室主任职责
2013/12/27 职场文书
物流专业求职计划书
2014/01/10 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
司法所长先进事迹
2014/06/02 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android