picker(items, options)
picker 多列选择器。datePicker(options)
datePicker 时间选择器,由picker拓展而来,提供年、月、日的选择。
Param | Type | Default | Description |
---|---|---|---|
items | array | picker的数据,即用于生成picker的数据,picker的层级可以自己定义,但建议最多三层。数据格式参考example。 | |
options | Object | 配置项 | |
[options.depth] | number | picker深度(也就是picker有多少列) 取值为1-3。如果为空,则取items第一项的深度。 | |
[options.id] | string | "default" | 作为picker的唯一标识,作用是以id缓存当时的选择。(当你想每次传入的defaultValue都是不一样时,可以使用不同的id区分) |
[options.className] | string | 自定义类名 | |
[options.container] | string | 指定容器 | |
[options.defaultValue] | array | 默认选项的value数组 | |
[options.onChange] | function | 在picker选中的值发生变化的时候回调 | |
[options.onConfirm] | function | 在点击”确定”之后的回调。回调返回选中的结果(Array),数组长度依赖于picker的层级。 | |
[options.onClose] | function | picker关闭后的回调 |
// 单列picker
weui.picker([
{
label: '飞机票',
value: 0,
disabled: true // 不可用
},
{
label: '火车票',
value: 1
},
{
label: '汽车票',
value: 3
},
{
label: '公车票',
value: 4,
}
], {
className: 'custom-classname',
container: 'body',
defaultValue: [3],
onChange: function (result) {
console.log(result)
},
onConfirm: function (result) {
console.log(result)
},
id: 'singleLinePicker'
});
// 多列picker
weui.picker([
{
label: '1',
value: '1'
}, {
label: '2',
value: '2'
}, {
label: '3',
value: '3'
}
], [
{
label: 'A',
value: 'A'
}, {
label: 'B',
value: 'B'
}, {
label: 'C',
value: 'C'
}
], {
defaultValue: ['3', 'A'],
onChange: function (result) {
console.log(result);
},
onConfirm: function (result) {
console.log(result);
},
id: 'multiPickerBtn'
});
// 示例1:
weui.datePicker({
start: 1990,
end: 2000,
defaultValue: [1991, 6, 9],
onChange: function(result){
console.log(result);
},
onConfirm: function(result){
console.log(result);
},
id: 'datePicker'
});
// 示例2:
weui.datePicker({
start: new Date(), // 从今天开始
end: 2030,
defaultValue: [2020, 6, 9],
onChange: function(result){
console.log(result);
},
onConfirm: function(result){
console.log(result);
},
id: 'datePicker'
});
// 示例3:
weui.datePicker({
start: new Date(), // 从今天开始
end: 2030,
cron: '* * 0,6', // 每逢周日、周六
onChange: function(result){
console.log(result);
},
onConfirm: function(result){
console.log(result);
},
id: 'datePicker'
});
// 示例4:
weui.datePicker({
start: new Date(), // 从今天开始
end: 2030,
cron: '1-10 * *', // 每月1日-10日
onChange: function(result){
console.log(result);
},
onConfirm: function(result){
console.log(result);
},
id: 'datePicker'
});