mui中dtpicker组件--弹出日期选择器(移动端滑动日历)

青旅半醒 2022-05-20 04:14 1555阅读 0赞

**转自**：http://www.menvscode.com/detail/5aab64de539bcc7803385bc9

dtpicker组件适用于弹出日期选择器，使用dtpicker组件必须要引入 mui.min.js、mui.min.css、mui.picker.min.css、mui.picker.min.js。

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

var dtPicker = new mui.DtPicker(options)

【2】显示picker

dtPicker.show( SelectedItemsCallback )

【3】实例

API详解

new DtPicker(\{options\}\})

(1) 参数：type，类型: JSON，设置日历初始视图模式。

\*若需要指定其他显示视图,

则需要通过css来控制显示项，通过js获取对应选择项。如设置月日时，需要在mui.dtpicker.css中设置显示视图宽度,隐藏不需要的视图。

/*月日时*/
    [data-type="day"] .mui-picker,
    [data-type="day"] .mui-dtpicker-title h5 {
        width: 33.3%;
    }
    [data-type="day"] [data-id="picker-i"],
    [data-type="day"] [data-id="title-i"],[data-type="day"] [data-id="picker-y"],
    [data-type="day"] [data-id="title-y"]  {
        display: none;
    }

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

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

(2) 参数：customData，类型: JSON，设置时间/日期别名。

设置格式:

"customData":{
        "date":[ 
            {value:"",text:""}
        ] 
    }

支持的值:

\*customData值生效的前提需要有指定的日期视图,如设置'y',需要在视图使用'年'视图

示例

// mui.init();
    document.getElementById('date01').onclick = function(){
    	var dtpicker = new mui.DtPicker({ 
    	    "type": "time",
    	    "customData": {
    	        "h": [ 
    	            { value: "am", text: "上午" },
    	            { value: "pm", text: "下午" },
    	        ]
    	    } 
    	})
    	dtpicker.show(function(e) { 
    	    console.log(e); 
    	})
    }

效果图

![QQ截图20180316151412][QQ_20180316151412]

(3) 参数：labels，类型: Array，设置默认标签区域提示语。

可设置\["年", "月", "日", "时", "分"\]这五个字段，可以根据视图模式选择设置个别标签,也可以设置所有标签，dtpicker显示的时候只会根据当前视图显示设置项。

\*建议不要设置空字符串,会影响美观哦

(4) 参数：beginDate，类型: Date，设置可选择日期最小范围。

可单独设置最小年范围，如: beginYear: 2015，其他日期支持Date格式，如:new Date(2016,5)可指定最小月份6月。

(5) 参数：endDate，类型: Date，设置可选择日期最大范围。

可单独设置最大年范围，如: endYear:2017，其他日期支持Date格式,如:new Date(2016,10)可指定最大月份11月。

实例

document.getElementById('date01').onclick = function(){
    	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); 
    	})
    }

效果图

![QQ截图20180316152945][QQ_20180316152945]

getSelectedItems()

返回值Date，类型: 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\]，类型: 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() 进行释放,下次用时再创建新实例。

实例

【1】默认显示全部年月日时分

![QQ截图20180316160758][QQ_20180316160758]

打印 selectItems 的结果

![QQ截图20180316160824][QQ_20180316160824]

【2】控制type参数，可修改默认的显示

![22222][]

【3】可自定每一项，比如自定义时、分

![333333][]

【4】手动设置起止时间

`};``相关文件下载链接：https://pan.baidu.com/s/1KJ5SFO4VnA5jTch3hB0pNA 密码：08l7`

[QQ_20180316151412]: http://www.menvscode.com/upload/018182359227958633.png
[QQ_20180316152945]: http://www.menvscode.com/upload/13752696047944468.png
[QQ_20180316160758]: http://www.menvscode.com/upload/8016340782217004.jpg
[QQ_20180316160824]: http://www.menvscode.com/upload/6217598568942824.jpg
[22222]: http://www.menvscode.com/upload/8389789767253129.jpg
[333333]: http://www.menvscode.com/upload/33523312261090954.jpg