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

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

下面来介绍小picker，分三种样式：

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

mode="time"是时间选择器

mode="date"是日期选择器

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

picker

选择器

地区选择器

当前选择：{{array[index]}}

时间选择器

当前选择: {{time}}

日期选择器

当前选择: {{date}}

http://

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 40rpMSakGlPRx;

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_jb51.rar

下面是页面展示

三种样式图：

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

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。