dtpicker

dtpicker组件适用于弹出日期选择器

快速体验

通过new mui.DtPicker()初始化DtPicker组件

  1.      var dtPicker = new mui.DtPicker(options);

显示picker

  2.     dtPicker.show( SelectedItemsCallback )

实例

  1.     var dtPicker = new mui.DtPicker(); 
  2.     dtPicker.show(function (selectItems) { 
  3.         console.log(selectItems.y);//{text: "2016",value: 2016} 
  4.         console.log(selectItems.m);//{text: "05",value: "05"} 
  5.     })

API详解

  • [

    new DtPicker({options}})

    ](#on-events-selector-data-handler)

    • 1.参数:type

      Type: JSON;)

      设置日历初始视图模式

      支持的值:

      可选值视图模式
      ‘datetime’完整日期视图(年月日时分)
      ‘date’年视图(年月日)
      ‘time’时间视图(时分)
      ‘month’月视图(年月)
      ‘hour’时视图(年月日时)

      *;)若需要指定其他显示视图,
      则需要通过css来控制显示项,通过js获取对应选择项.如 设置月日时;),需要在mui.dtpicker.css中设置显示视图宽度,隐藏不需要的视图

      1. /*月日时*/
      2. [data-type="day"] .mui-picker,
      3. [data-type="day"] .mui-dtpicker-title h5 {
      4.     width: 33.3%;
      5. }
      6. [data-type="day"] [data-id="picker-i"],
      7. [data-type="day"] [data-id="title-i"],[data-type="day"] [data-id="picker-y"],
      8. [data-type="day"] [data-id="title-y"]  {
      9.     display: none;
      10. }

      在mui.dtpicker.js中getSelected()方法下添加selected对象值

      1. case 'day':
      2.     selected.value = selected.m.value + '-' + selected.d.value + ' ' + selected.h.value;
      3.     selected.text = selected.m.text + '-' + selected.d.text + ' ' + selected.h.text;
      4.   break;

    • 2.参数:customData

      Type: JSON;)

      设置时间/日期别名

      设置格式:

      1. "customData":{
      2.     "date":[ 
      3.         {value:"",text:""}
      4.     ] 
      5. }

      示例:

      1. var dtpicker = new mui.DtPicker({ 
      2.     "type": "time",
      3.     "customData": {
      4.         "h": [ 
      5.             { value: "am", text: "上午" },
      6.             { value: "pm", text: "下午" },
      7.         ]
      8.     } 
      9. })
      10. dtpicker.show(function(e) { 
      11.     console.log(e); 
      12. })

      支持的值:

      可选值视图模式
      ‘y’可设置 年别名
      ‘m’可设置 月 别名
      ‘d’可设置 日别名
      ‘h’可设置 时别名
      ‘i’可设置 分别名

      *;)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月

    • 完整示例:

      1. var dtpicker = new mui.DtPicker({
      2.     type: "datetime",//设置日历初始视图模式 
      3.     beginDate: new Date(2015, 04, 25),//设置开始日期 
      4.     endDate: new Date(2016, 04, 25),//设置结束日期 
      5.     labels: ['Year', 'Mon', 'Day', 'Hour', 'min'],//设置默认标签区域提示语 
      6.     customData: { 
      7.         h: [
      8.             { value: 'AM', text: 'AM' },
      9.             { value: 'PM', text: 'PM' }
      10.         ] 
      11.     }//时间/日期别名 
      12. }) 
      13. dtpicker.show(function(e) {
      14.     console.log(e);
      15. })

  • [

    getSelectedItems()

    ](#on-events-selector-data-handler)

    • 返回值Date

      Type: Date;)

      获取选中的项

      如: var iTems = dtPicker.getSelectedItems()

      返回值:

      如:

      2. /* * iTems.value 拼合后的 value * iTems.text 
      3.  * 拼合后的 text
      4.  * iTems.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
      5.  * iTems.m 月，用法同年 
      6.  * iTems.d 日，用法同年 
      7.  * iTems.h 时，用法同年 
      8.  * iTems.i 分（minutes 的第二个字母），用法同年 
      9.  */

  • [

    show( getSelectedItems )

    ](#on-events-selector-data-handler)

    • 返回值:[data]

      Type: Array;)

      获取选中的项（数组）

      如:

      2. dtpicker.show(function(items) { 
      3.     /* * items.value 拼合后的 value 
      4.      * items.text 拼合后的 text 
      5.      * items.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本 
      6.      * items.m 月，用法同年 
      7.      * items.d 日，用法同年 
      8.      * items.h 时，用法同年 
      9.      * items.i 分（minutes 的第二个字母），用法同年 
      10.      */ 
      11.      console.log(items); 
      12.      })

      *;)return false; 可以阻止选择框的关闭

  • [

    hide()

    ](#on-events-selector-data-handler)

    • 隐藏dtPicker

      如:dtPicker.hide()

  • [

    dispose()

    ](#on-events-selector-data-handler)

    • 释放组件资源(释放后将将不能再操作组件)

      如:dtPicker.dispose()

      *;) 通常情况下，不需要释放组件资源，初始化之后，可以一直使用。
      *;) 当内容较多，如不释放组件资源，在某些设备上可能会卡顿。
      *;) 所以每次用完便立即调用 dispose() 进行释放,下次用时再创建新实例。

扩展阅读

*;)picker组件会触发webview硬件加速,在部分手机上可以能出现卡顿或变形的情况此时需要开启硬件加速,硬件加速请参考 硬件加速章节

代码块激活字符:

mpoppicker

mdtpicker