效果
image
html代码
<view class="section">
<view class="section__title">省市区选择器</view>
<picker mode="region" bindchange="bindRegionChange" value="" custom-item="">
<view class="picker">
当前选择：
<view wx:if="{{region}}">{{region[0]}}，{{region[1]}}，{{region[2]}}</view>
</view>
</picker>
</view>
<view class="section">
<view class="section__title">时间选择器</view>
<picker mode="time" value="" 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="" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="picker">
当前选择: {{date}}
</view>
</picker>
</view>
css代码
.section{
padding: 20rpx;
border-bottom: 1px solid #aaaaaa;
}
js代码
Page({
data: {
region: "",
time: "",
date: ""
},
bindRegionChange(e) {
let { value } = e.detail;
console.log("地区改变:", value);
this.setData({
region: value
})
},
bindTimeChange(e) {
let { value } = e.detail;
console.log("时间改变:", value);
this.setData({
time: value
})
},
bindDateChange(e) {
let { value } = e.detail;
console.log("日期改变:", value);
this.setData({
date: value
})
},
});
