微信小程序之picker日期和时间选择器


Posted in Javascript onFebruary 09, 2017

下面来介绍小picker,分三种样式:

  • 默认的自己可以定义数据的
  • mode="time"是时间选择器
  • mode="date"是日期选择器

跟其他的一样先来看下picker.wxml

<view class="page">
 <view class="page__hd">
 <text class="page__title">picker</text>
 <text class="page__desc">选择器</text>
 </view>
 <view class="page__bd">
 <view class="section">
  <view class="section__title">地区选择器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  <view class="picker">
   当前选择:{{array[index]}}
  </view>
  </picker>
 </view>
 <view class="section">
  <view class="section__title">时间选择器</view>
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
  <view class="picker">
   当前选择: {{time}}
  </view>
  </picker>
 </view>

 <view class="section">
  <view class="section__title">日期选择器</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
  <view class="picker">
   当前选择: {{date}}
  </view>
  </picker>
 </view>
 </view>
</view>

picker.wxss

page {
 background-color: #fbf9fe;
 height: 100%;
}
.page__hd{
 padding: 50rpx 50rpx 100rpx 50rpx;
 text-align: center;
}
.page__title{
 display: inline-block;
 padding: 20rpx 40rpx;
 font-size: 32rpx;
 color: #AAAAAA;
 border-bottom: 1px solid #CCCCCC;
}
.page__desc{
 display: none;
 margin-top: 20rpx;
 font-size: 26rpx;
 color: #BBBBBB;
}
.section{
 margin-bottom: 80rpx;
}
.section__title{
 margin-bottom: 16rpx;
 padding-left: 30rpx;
 padding-right: 30rpx;
}
.picker{
 padding: 26rpx;
 background-color: #FFFFFF;
}

picker.js

Page({
 data: {
 array: ['中国', '美国', '巴西', '日本'],
 index: 0,
 date: '2016-09-01',
 time: '12:01'
 },
 bindPickerChange: function(e) {
 console.log('picker发送选择改变,携带值为', e.detail.value)
 this.setData({
  index: e.detail.value
 })
 },
 bindDateChange: function(e) {
 this.setData({
  date: e.detail.value
 })
 },
 bindTimeChange: function(e) {
 this.setData({
  time: e.detail.value
 })
 }
})

demo地址 :WeAppDemo_3water.rar

下面是页面展示

微信小程序之picker日期和时间选择器

三种样式图:

1. 默认的自己可以定义数据的

微信小程序之picker日期和时间选择器

2. mode="time"是时间选择器

微信小程序之picker日期和时间选择器

3. mode="date"是日期选择器

微信小程序之picker日期和时间选择器

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
js中文逗号转英文实现
Feb 11 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 Javascript
BootStrap 弹出层代码
Feb 09 #Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 #Javascript
javascript history对象详解
Feb 09 #Javascript
jquery dialog获取焦点的方法
Feb 09 #Javascript
jQuery实现淡入淡出的模态框
Feb 09 #Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 #Javascript
JS在浏览器中解析Base64编码图像
Feb 09 #Javascript
You might like
PHP5 字符串处理函数大全
2010/03/23 PHP
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
php向js函数传参的几种方法
2014/08/10 PHP
分享3个php获取日历的函数
2015/09/25 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
Firefox div高度自适应
2009/04/28 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
基于python实现模拟数据结构模型
2020/06/12 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
关于廉洁的广播稿
2014/01/30 职场文书
好听的队名和口号
2014/06/09 职场文书
保护动物的标语
2014/06/11 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
教师个人成长总结
2015/02/11 职场文书
2015年中秋寄语
2015/07/31 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL
图文详解matlab原始处理图像几何变换
2021/07/09 Python