天天看點

mui日期選擇器html,MUI-城市關聯,日期關聯-picker(選擇器)學習筆記(附最詳注釋)...

知識點:

城市篇

addEventListener(event,function,useCapture) :方法用于向指定元素添加事件。

addEventListener(事件名,事件需要執行的函數,布爾值)

支援:所有HTML DOM事件

(1)tap和click的差別:

兩者都會在點選時觸發,但是在手機WEB端,click會有 200~300 ms,是以請用tap代替click作為點選事件。

(tap有擊穿現象,現在性能過剩,用click可行)

singleTap和doubleTap 分别代表單次點選和雙次點選。

*poppicker元件依賴mui.picker.js/.css mui.poppicker.js/.css請務必在mui.js/css後中引用,也可統一引用 壓縮版本:mui.picker.min.js

這裡需要引入 mui.picker.js mui.picker.css mui.poppicker.js mui.poppicker.css

四個檔案,或者這四個檔案的min檔案

通過new mui.PopPicker() - 初始化popPicker元件

var picker = new mui.PopPicker({ //這裡注意大小寫PopPicker

layer: 3 , //表示三列,即三級菜單或者關聯

buttons:['取消', '确定'] //顯示按鈕

})

通過picker.setData - 給picker對象添加資料

setData() 支援資料格式為: 數組

picker.setData([{value:'zz',text:'智子'}]); //一列樣式

picker.setData([{ //二列樣式

value: '110000',

text: '北京市',

children: [{

value: "110101",

text: "東城區"

}]

}])

picker.setData([{ //三列樣式

value: '110000',

text: '北京市',

children: [{

value: "110101",

text: "東城區",

children:[{

value: "111000",

text: "中關村"

}]

}]

}])

通過picker.show() - 顯示picker

通過picker.show( function(getSelectedItems) { } ) 擷取選中的項(數組)

PopPicker 建立執行個體并填充資料後,可以設定每個層級的選中項,因為 PopPicker

是支援多層級聯的,是以:

(1)可通過 instance.pickers[index] 拿到指定層級的執行個體,

(2)然後通過setSelectedIndex()和setSelectedValue()兩個方法,設定指定層級的選中項

var picker = new mui.PopPicker();

picker.setData([{

value: "first",

text: "第一項"

}, {

value: "second",

text: "第一項"

}, {

value: "third",

text: "第三項"

}, {

value: "fourth",

text: "第四項"

}, {

value: "fifth",

text: "第五項"

}])

//picker.pickers[0].setSelectedIndex(4, 2000); //4和value:''fourth''的差別

picker.pickers[0].setSelectedValue('fourth', 2000);

//這裡表示預設選中第一列的第四項,時間是2000毫秒

picker.show(function(SelectedItem) { //擷取選中的項(數組)注意大小寫

console.log(SelectedItem);

})

.mui-picker{}可以設定選擇器css樣式;

.mui-picker{

background-color: #fff; //設定選擇器背景為白色

}

日期篇

通過new mui.DtPicker() - 初始化DtPicker元件 //城市是new mui.PopPicker()

通過type - 設定月曆初始視圖模式

通過labels - 設定預設标簽區域提示語

通過beginDate和endDate設定開始,結束日期

通過customData -設定時間/日期别名

通過dtPicker.show( SelectedItemsCallback ) - 顯示dtPicker

var dtpicker = new mui.DtPicker({ //注意大小寫

"type": "time", // 時間格式(時分)

// "type":"datetime"(年月日時分)

// "type":"date"(年月日)

// "type":"hour"(年月日時)

"labels": ['年', 'Mon', 'Day', 'Hour', 'min'],//設定預設标簽區域提示語

"beginDate": new Date(2015, 04, 25),//設定開始日期

"endDate": new Date(2016, 04, 25),//設定結束日期

"customData": {

"h": [ //時

{ value: "am", text: "上午" },

{ value: "pm", text: "下午" },

],

"i":[

{value: "10", text: "10分"},

{value: "20", text: "20分"},

]

}

})

dtpicker.show(function(items) {

console.log(items.d); //得到選中的年

})

mui日期選擇器html,MUI-城市關聯,日期關聯-picker(選擇器)學習筆記(附最詳注釋)...

QQ截圖20170624231049.png

完整代碼:

Hello MUI

.mui-picker{

background-color: white;

}

.mui-poppicker-header{

background-color: white;

}

選擇城市

var picker = new mui.PopPicker({

layer: 3, //3層菜單

buttons:['取消','确定'] // 顯示按鈕名字

});

picker.setData([{

value: '110000',

text: '北京市',

children: [{

value: "110101",

text: "東城區",

children: [

{

value: '110111',

text:'中關村'

},

{

value: '110112',

text:'中關村2'

}

]

}],

}, {

value: '120000',

text: '天津市',

children: [

{

value: "120101",

text: "和平區"

}, {

value: "120102",

text: "河東區"

}, {

value: "120104",

text: "南開區",

children: [

{

value:'120105',

text:'地下城'

},

{

value:'120106',

text:'英雄聯盟'

}

]

}

]

}])

picker.pickers[0].setSelectedIndex(1); //預設選擇第1列,第2個元素(即天津市)

picker.pickers[1].setSelectedIndex(2,200,function() {}); //第2列,第三個元素(南開區)

picker.pickers[2].setSelectedIndex(1); // 第3列,(英雄聯盟)

document.getElementById('aa').addEventListener('tap',function() {

picker.show(function(getSelectedItems){ //擷取選中的項(數組)

console.log(getSelectedItems[0].text); //輸出結果為: 天津市

})

// picker.show(function(SelectedItem) {

// console.log(SelectedItem[0].text);

// })

});