mui中dtpicker元件--彈出日期選擇器(移動端滑動日曆)
轉自：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】例項
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，型別: JSON，設定日曆初始檢視模式。
| 可選值 | 檢視模式 |
|---|---|
| 'datetime' | 完整日期檢視(年月日時分) |
| 'date' | 年檢視(年月日) |
| 'time' | 時間檢視(時分) |
| 'month' | 月檢視(年月) |
| 'hour' | 時檢視(年月日時) |
*若需要指定其他顯示檢視,
則需要通過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:""}
]
}支援的值:
| 可選值 | 檢視模式 |
|---|---|
| 'y' | 可設定 年別名 |
| 'm' | 可設定 月別名 |
| 'd' | 可設定 日別名 |
| 'h' | 可設定 時別名 |
| 'i' | 可設定 分別名 |
*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);
})
}效果圖
(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);
})
}效果圖
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】預設顯示全部年月日時分
document.getElementById('datebox01').onclick = function(){
var dtPicker01 = new mui.DtPicker();
dtPicker01.show(function (selectItems) {
console.log(selectItems.y);//結果為：{text: "2016",value: 2016}
console.log(selectItems.m);//結果為：{text: "05",value: "05"}
console.log(selectItems.d.text);//11
console.log(selectItems.h.text);//09
console.log(selectItems.i.text);//09
console.log(selectItems.text);//結果為：2016-10-11 09:09
document.getElementById('datebox01').getElementsByTagName('span')[0].innerText = '-- '+selectItems.text
});
};
列印 selectItems 的結果
【2】控制type引數，可修改預設的顯示
document.getElementById('datebox02').onclick = function(){
var dtPicker02 = new mui.DtPicker({
'type' : 'hour'
});
dtPicker02.show(function(selectItems){
console.log(selectItems.text);//2016-10-11
document.getElementById('datebox02').getElementsByTagName('span')[0].innerText = '-- '+selectItems.text
});
};
【3】可自定每一項，比如自定義時、分
document.getElementById('datebox03').onclick = function(){
//可自定每一項，比如自定義時、分
var dtpicker = new mui.DtPicker({
"type": "hour",
"customData": {
"h": [
{ value: "am", text: "上午" },
{ value: "pm", text: "下午" },
],
"i": [
{ value: "q", text: "10"},
{ value: "w", text: "20"},
{ value: "e", text: "30"},
{ value: "r", text: "40"},
{ value: "t", text: "50"},
{ value: "y", text: "59"}
]
}
});
dtpicker.show(function(e) {
console.log(e.i.text);//結果為當前設定的多少分
console.log(e.text);//結果為 2016-10-10 上午:10
document.getElementById('datebox03').getElementsByTagName('span')[0].innerText = '-- '+e.text
});
};
【4】手動設定起止時間
document.getElementById('datebox04').onclick = function(){
//手動設定起止時間
var dtpicker = new mui.DtPicker({
type: "datetime",//設定日曆初始檢視模式
beginDate: new Date(2015, 00, 01),//設定開始日期 --月份：索引是0；
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);
document.getElementById('datebox04').getElementsByTagName('span')[0].innerText = '-- '+e.text
});
};相關檔案下載連結：https://pan.baidu.com/s/1KJ5SFO4VnA5jTch3hB0pNA 密碼：08l7