💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
dtpicker组件适用于弹出日期选择器 通过new mui.DtPicker()初始化DtPicker组件 ~~~ var dtPicker = new mui.DtPicker(options); ~~~ 显示picker ~~~ dtPicker.show( SelectedItemsCallback ) ~~~ 实例 ~~~ var dtPicker = new mui.DtPicker(); dtPicker.show(function (selectItems) { console.log(selectItems.y);//{text: "2016",value: 2016} console.log(selectItems.m);//{text: "05",value: "05"} }) ~~~ API详解 **new DtPicker({options}})** ~~~ 1.参数:type Type: JSON 设置日历初始视图模式 支持的值: ~~~ ![](https://box.kancloud.cn/2016-07-18_578ce87dc1fc3.png) *暂不支持指定其他视图, 如有特殊需求可在dtpicker.js中修改getSelected()方法中selected对象值 * * * * * **2.参数:customData** Type: JSON 设置时间/日期别名 设置格式: ~~~ "customData":{ "date":[ {value:"",text:""} ] } ~~~ 示例: ~~~ var dtpicker = new mui.DtPicker({ "type": "time", "customData": { "h": [ { value: "am", text: "上午" }, { value: "pm", text: "下午" }, ] } }) dtpicker.show(function(e) { console.log(e); }) ~~~ 支持的值: ![](https://box.kancloud.cn/2016-07-18_578ce87dd8126.png) *customData值生效的前提需要有指定的日期视图,如设置'y',需要在视图使用'年'视图 * * * * * **3.参数:labels** Type: Array 设置默认标签区域提示语 可设置["年", "月", "日", "时", "分"]这五个字段, 可以根据视图模式选择设置个别标签,也可以设置所有标签, dtpicker显示的时候只会根据当前视图显示设置项, *建议不要设置空字符串,会影响美观哦 * * * * * **4.参数:beginDate** Type: Date 设置可选择日期最小范围 可单独设置最小年范围, 如: beginYear:2015, 其他日期支持Date格式,如:new Date(2016,5)可指定最小月份6月 * * * * * **5.参数:endDate** Type: Date 设置可选择日期最大范围 可单独设置最大年范围, 如: endYear:2017, 其他日期支持Date格式,如:new Date(2016,10)可指定最大月份11月 * * * * * 完整示例: ~~~ var dtpicker = new mui.DtPicker({ type: "datetime",//设置日历初始视图模式 beginDate: new Date(2015, 04, 25),//设置开始日期 endDate: new Date(2016, 04, 25),//设置结束日期 labels: ['Year', 'Mon', 'Day', 'Hour', 'min'],//设置默认标签区域提示语 customData: { h: [{ value: 'AM', text: 'AM' }, { value: 'PM', text: 'PM' }] }//时间/日期别名 }) dtpicker.show(function(e) { console.log(e); }) ~~~ * * * * * **getSelectedItems()** 返回值Date Type: Date 获取选中的项 如: var iTems = dtPicker.getSelectedItems() 返回值: 如: ~~~ /* * iTems.value 拼合后的 value * iTems.text 拼合后的 text * iTems.y 年,可以通过 rs.y.vaue 和 rs.y.text 获取值和文本 * iTems.m 月,用法同年 * iTems.d 日,用法同年 * iTems.h 时,用法同年 * iTems.i 分(minutes 的第二个字母),用法同年 */ ~~~ **show( getSelectedItems )** 返回值:[data] Type: Array 获取选中的项(数组) 如: ~~~ dtpicker.show(function(items) { /* * items.value 拼合后的 value * items.text 拼合后的 text * items.y 年,可以通过 rs.y.vaue 和 rs.y.text 获取值和文本 * items.m 月,用法同年 * items.d 日,用法同年 * items.h 时,用法同年 * items.i 分(minutes 的第二个字母),用法同年 */ console.log(items); }) ~~~ *return false; 可以阻止选择框的关闭 * * * * * **hide()** 隐藏dtPicker 如:dtPicker.hide() * * * * * **dispose()** 释放组件资源(释放后将将不能再操作组件) 如:dtPicker.dispose() * 通常情况下,不需要释放组件资源,初始化之后,可以一直使用。 * 当内容较多,如不释放组件资源,在某些设备上可能会卡顿。 * 所以每次用完便立即调用 dispose() 进行释放,下次用时再创建新实例。 *picker组件会触发webview硬件加速,在部分手机上可以能出现卡顿或变形的情况此时需要开启硬件加速,硬件加速请参考硬件加速章节