jQuery基于muipicker实现模拟ios的时间选择

首先，让我们看看最初的muipicker示例。

！DOCTYPE html html head meta charset=' utf-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1，minimum-scale=1，maximum-scale=1，user-scale=no '/title/title！-标准mui.css - link rel='样式表href='./css/mui.min.css '！-应用自定义的css - link rel='样式表type='text/css' href='./css/app.css'/link href='./CSS/mui . picker . CSS“rel=”样式表/link href='./css/mui.poppicker.css' rel='样式表'/!- link rel='样式表type='text/css' href='./CSS/mui。提货人。量滴CSS '/-样式.mui-BTN { font-size : 16px；padd : 8pxmargin : 3px } H5。mui-内容填充{左边距： 3px页边距-top: 20px！重要；} H5。mui-内容-填充：第一个孩子{ margin-top : 12px！重要；} .ui-alert { text-align : center；padd : 20px 10px font-size : 16px；}/style/head body header class=' mui-bar mui-bar-nav ' a class=' mui-action-back mui-icon mui-icon-left-nav mui-pull-left '/a h1 class=' mui-title '选取器(选择器)/h1/header div class=' mui-content ' div class=' mui-content-padding ' H5 class=' mui-content-padding '原生选择/H5选择类别='穆伊-BTN穆伊-BTN-街区'选项值=' item-1 ' item-1/选项值=“项目-2”项目-2/选项值=' item-3 ' item-3/选项值=' item-4 ' item-4/选项值='项目-5 '项目-5/选项/选择br/p原生选择（选择框)在不同的设备上用户界面可能会有差异，并且不支持多级联动（多个挑选可实现，但较麻烦),故mui封装了采摘者组件，参见如下示例。

/p H5类=' mui-内容-填充'普通示例/h5按钮id=' show user picker ' class=' mui-BTN mui-BTN-block ' type=' button '一级选择示例./button div id=' user result ' class=' ui-alert '/div H5 class=' mui-content-padding '级联示例/h5按钮id=' show city picker ' class=' mui-BTN mui-BTN-block ' type=' button '二级联动示例./button div id=' city result ' class=' ui-alert '/div button id=' show city picker 3 ' class=' mui-BTN mui-BTN-block ' type=' button '三级联动示例./button div id='城市结果3 ' class=' ui-alert '/div/div/div脚本src='http:/js/mui。量滴js /脚本！-脚本src='http:/js/mui。提货人。量滴js '/script-script src=' http :/js/mui。提货人。js '/script脚本src=' http :/js/mui。波普蒂克。js/'脚本脚本src='http:/js/city。数据。js ' type=' text/JavaScript ' charset=' utf-8 '/script script src=' http :/js/city。数据-3。js ' type=' text/JAVAScript ' charset=' utf-8 '/脚本脚本（函数($，文档){ $ .init()；$.就绪（函数(){ //普通示例var userPicker=new $ .PopPicker()；用户选择器。setdata([{ value : ' ywj '，text: '董事长叶文洁}，{ value: 'aaa '，text: '总经理艾AA' }，{ value: 'lj '，text: '罗辑}，{ value: 'ymt '，text: '云天明}，{ value: 'shq '，text: '史强}，{ value: 'zhbh '，text: '章北海}，{ value: 'zhy '，text: '庄颜}，{ value: 'gyf '，text: '关一帆}，{ value: 'zhz '，text: '智子}，{ value: 'gezh '，text: '歌者' }]);var showuser pickerbutton=doc。getelementbyid(' show user picker ')；var用户结果=文档。getelementbyid('用户结果')；showuserpickerbutton按钮。addeventlistener(' tap '，function(event){ user picker。show(function(items){ user result。innertext=JSON。stringify(项[0])；//返回错误的可以阻止选择框的关闭//返回false })；}，false)；//- //级联示例var cityPicker=new $ .PopPicker({ layer : 2 })；城市采摘者。setdata(城市数据)；var showcity pickerbutton=doc。getelementbyid(' show city picker ')；var城市结果=doc。getelementbyid('城市结果')；showcity pickerbutton。addeventlistener(' tap '，function(event){ city picker。show(function(items){ city result。innertext='你选择的城市是： '项[0]。文本""项[1]。文本；//返回错误的可以阻止选择框的关闭//返回false })；}，false)；//- ////级联示例var cityPicker3=new $ .PopPicker({ layer : 3 })；城市拾取器3。setdata(城市数据3)；var showcity pickerbutton=doc。getelementbyid(' show city picker 3 ')；var城市结果3=doc。getelementbyid('城市结果3 ')；showcity pickerbutton。addeventlistener(' tap '，function(event){ city picker 3。show(function(items){ city result 3。内部文本='你选择的城市是： '(项目[0] || {})。文本' '(项目[1] || {})。文本' '(项目[2] || {})。文本；//返回错误的可以阻止选择框的关闭//返回false })；}，false)；});})(mui，文档);/脚本/正文/html在此基础上修改为类似ios选择时间的插件。

把里面数据换成下面的数据就可以了。

（函数($，文档){ $ .init()；$.就绪（函数(){ //普通示例//年月var year Array=新数组()；for(var I=0；I 10I){ var monthArray=new Array()；for(var j=0；歼12;j){ var month=new Object()；month.value=j 1 '月；month.text=j 1 '月；monthArray.push(月);} var year=new Object()；年份。值=i 2016 '年；year.text=i 2016 '年；year . children=montharrayyeararray . push(年);};//年月日var year Array=新数组()；for(var I=0；I 10I){ var monthArray=new Array()；for(var j=0；歼12;j ) { //月的最后一天定义变量年份=I 2016 var month=j；var lastDay=新日期（年、月1、0)。getDate()；//月要加1,原本月是从0开始的，但是因为0是这个月的上个月，所以到了上个月if(年份==2016年月份==1){ console。日志(‘最后一天’最后一天)；} var Dayarray=new Array()；for(var k=0；k最后一天；k){ var day=new Object()；一天。值=k ^ 1 '日；一天。文本=k ^ 1 '日；dayArray.push(天);} var month=new Object()；month . children=Dayarraymonth . value=j 1 '月；month.text=j 1 '月；monthArray.push(月);} var year=new Object()；年份。值=i 2016 '年；year.text=i 2016 '年；year . children=montharrayyeararray . push(年);};控制台。log(年数组)；//小时分钟var小时秒=新数组()；for(var I=0；I 24I){ var hschildarray=new Array()；for(var j=0；j 60j){ var子对象=新对象()；var secure=j；if(j ^ 10){ var secture=j；孩子们反对。value=“0”部分；孩子们反对。text=“0”部分；} else { children对象。value=SeCurechildobject . text=Secture } hschildarray。push(子对象)；} var对象=新对象()；if(I ^ 10){ object。值=' 0 ' I ' :对象。text=" 0 " I " :} else { object . value=I ' : object . text=I ' : }对象。children=HSchildren数组；hoursec.push(对象);};});})(mui，文档);效果图：

年月日

小时分钟

效果只有在手机端或者手机铬的手机模拟器中可以看到。

最后附上muipicker的开源代码库地址https://github.com/dcloudio/mui/tree/master/examples/hello-mui