小程序picker组件

时间选择器

<!--wxml-->
<picker class="weui-btn" mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <button type="default">时间选择器</button>
</picker>

//js
Page({
    data: {
        time: '12:01'
    },
    bindTimeChange: function(e) {
        this.setData({
            time: e.detail.value
        })
    }
});

image.png

日期选择器

<!--wxml-->
<picker class="weui-btn" mode="date" value="{{date}}" start="" end="" bindchange="bindTimeChange">
    <button type="default">搜索</button>
</picker>

//js
Page({
    data: {
        date: '2016-09-01'
    },
    bindDateChange: function(e) {
        this.setData({
            date: e.detail.value
        })
    }
});

image.png

单列选择器

<!--wxml-->
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
      <button class="weui-btn" type="default">自定义</button>
</picker>

//js
Page({
    data: {
        array: ['红色', '橙色', '黄色', '绿色', '青色', '蓝色', '紫色'],
        index: 0,
    },
    bindPickerChange: function(e) {
        console.log('picker发送选择改变，携带值为', e.detail.value);//index为数组点击确定后选择的item索引
        this.setData({
            index: e.detail.value[图片上传失败...(image-4b39e2-1541911967181)]![小程序二维码.jpg](https://img.haomeiwen.com/i13511312/be48a7bb61a75a8a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


        })
    }
});

image.png

扫码体验

小程序二维码.jpg