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) {

/* * 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.d); //得到选中的年

})

QQ截图20170624231049.png

完整代码：

Hello MUI

/*.mui-poppicker-body{

background-color: white;

border: 1px solid red;

color:yellow;

}*/

.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);

// })

});