微信小程序之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 相关文章推荐
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
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
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
10个php函数实用却不常见
2015/10/13 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
js确定对象类型方法
2012/03/30 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
创业计划书中包含的9个方面
2013/12/26 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
同事打架检讨书
2014/02/04 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
 Python 中 logging 模块使用详情
2022/03/03 Python
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS
css3 选择器
2022/05/11 HTML / CSS