picker选择组件

介绍

picker选择组件是H5移动端选择器，支持日期选择器，自定义级联选择，自定义html选择

参数说明

字段	类型	默认值	说明
elem	字符串		绑定元素，用于触发选择器
radius	整型/字符串		圆角数值
textField	字符串	name	显示的名称对应字段，根据数据的字段对应
valueField	字符串	value	获取的值对应字段，根据数据的字段对应
data	数组		如果使用options参数，则不需要设置data，反之必须设置data；固定式需要设置占位，如：[[{name:’张三’, value:101}], [], []] （这里占位共三列滚动列）
title	字符串		标题显示
shade	数字	默认0.36透明度	遮罩：可调整0~1（设置false，则关闭遮罩）
minDate	字符串		最小日期/时间限制
maxDate	字符串		最大日期/时间限制
btns	数组	[‘取消’, ‘清空’, ‘确认’]	设置时必须为三个
search	布尔/字符串	false	是否开启搜索，填充字符串则为输入框提示【注：只对单列有效】
type	整型		设置2为微信皮肤，设置3自定义html（需要配合content参数），默认无
options	字符串		设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
onSuccess	function	(index, elem)	渲染成功回调
onSelect	function	(index, i, result)	停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
onConfirm	function	(index, value, result)	点击确认回调
onClear	function	(index)	点击清空回调
onCancel	function	(index)	点击取消回调
onShade	function	(index)	点击遮罩回调
onShow	function	(index)	点击显示回调

返回值

var pickerIndex = picker.init({});
index是第几个picker的意思

删除指定

picker.remove(pickerIndex);

删除所有

picker.removeAll();

赋值设置（如：年月日：2023-09-11）

picker.setValue(index, [
{value: ‘2023’},
{value: ‘09’},
{value: ‘11’},
])

值重置（pickerIndex是指定哪个选择器，-1是设置第几行滚动列（从-1开始，因为内置加一下标），array就是重置的数据）

picker.setData(pickerIndex, -1, array);

值重置-动态（pickerIndex是指定哪个选择器，-1是设置第几行滚动列（从-1开始，因为内置加一下标），array就是重置的数据）

picker.setDataTrends(pickerIndex, -1, array);
参考index.html中的‘动态调整’，选择第一列后，第二第三…列动态变动（动画效果）

示例

picker.init({
    elem: '#year', // 绑定元素
    options: 'year', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
    onSuccess: function(index, elem){ // 渲染成功回调
        picker.setValue(index, [
            {value: '2024'},
        ])
    },
    onSelect: function(result){
        console.log('onSelect --- ', JSON.stringify(result))
    },
    onConfirm: function(index, value, result){ // 点击确认回调
        $("#year").val(value)
        console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
    },
    onClear: function(index){ // 点击清空回调
    },
    onCancel: function(index){ // 点击取消回调
    },
    onShade: function(index){ // 点击遮罩回调
    },
})

静态占位选择

// 选择地区
picker.init({
    elem: '#addr', // 绑定元素
    data: [addr_array, addr_array_bj, []], // 列数值 （addr_array省，addr_array_bj市，[]区）
    onSuccess: function(index, elem){ // 渲染成功回调
    },
    onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
        if(i == 0){
            if(result[i].name == '北京'){
                picker.setData(index, i, addr_array_bj);
            }else if(result[i].name == '广东'){
                picker.setData(index, i, addr_array_gd);
                picker.setData(index, i+1, add_array_gd_dg);
            }
        }else if(i == 1){
            if(result[i].name == '深圳市'){
                picker.setData(index, i, add_array_gd_sz);
            }else if(result[i].name == '东莞市'){
                picker.setData(index, i, add_array_gd_dg);
            }else{
                picker.setData(index, i, []);
            }
        }
        console.log('onSelect --- ', JSON.stringify(result))
    },
    onConfirm: function(index, value, result){ // 点击确认回调
        //结果处理后再显示
        var text = [];
        for(var i = 0; i < result.length; i++) {
            text.push(result[i].name);
        }
        $("#addr").val(text.join('-'))
        console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
    },
    onClear: function(index){ // 点击清空回调
    },
    onCancel: function(index){ // 点击取消回调
    },
    onShade: function(index){ // 点击遮罩回调
    },
})

可以动态调整

// 动态调整
picker.init({
    elem: '#trends', // 绑定元素
    data: [addr_array], // 列数值（使用动态这里可以不用占位，这里假设第一个参数没子级，如果默认第一个值，就要追加子级数组）
    onSuccess: function(index, elem){ // 渲染成功回调
    },
    onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
        if(i == 0){
            if(result[i].name == '北京'){
                picker.setDataTrends(index, i, addr_array_bj);
            }else if(result[i].name == '广东'){
                picker.setDataTrends(index, i, addr_array_gd);
                picker.setDataTrends(index, i+1, add_array_gd_dg);
            }
        }else if(i == 1){
            if(result[i].name == '深圳市'){
                picker.setDataTrends(index, i, add_array_gd_sz);
            }else if(result[i].name == '广州市'){
                picker.setDataTrends(index, i, null);
            }else if(result[i].name == '东莞市'){
                picker.setDataTrends(index, i, add_array_gd_dg);
            }
        }
        console.log('onSelect --- ', JSON.stringify(result))
    },
    onConfirm: function(index, value, result){ // 点击确认回调
        //结果处理后再显示
        var text = [];
        for(var i = 0; i < result.length; i++) {
            text.push(result[i].name);
        }
        $("#trends").val(text.join('-'))
        console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
    },
    onClear: function(index){ // 点击清空回调
    },
    onCancel: function(index){ // 点击取消回调
    },
    onShade: function(index){ // 点击遮罩回调
    },
})

时间日期选择组件快速调用。

在input添加tool-time样式名称，即可快速调起时间选择控件
data-type=”date” //日期类型,

year 年选择器，只提供年列表选择
month 年月选择器，只提供年、月选择
date 日期选择器（默认），可选择：年、月、日选择
time 时间选择器，只提供时、分、秒选择
timesecond 日期时间选择器，可选择：年月日、时分秒

data-min=”2024-01-01” //可往前选日期限制,
data-max=”2024-11-01” //可往后选日期限制,

<input type="text" class="mbui-input tool-time" placeholder="选择日期" readonly name="select_time">