再mui得picker的基础上修改为类似ios选择时间的插件。
muipicker exapmple地址
把里面数据换成下面的数据就可以了。
(function($, doc) {$.init();$.ready(function() {//普通示例// 年月var yearArray = new Array();for (var i = 0; i < 10; i ++) {var monthArray = new Array();for (var j = 0; j < 12; j ++) {var month = new Object();month.value = j + 1 + "月";month.text = j + 1 + "月";monthArray.push(month);}var year = new Object();year.value = i + 2016 + "年" ;year.text = i + 2016 + "年";year.children = monthArray;yearArray.push(year);};//年月日var yearArray = new Array();for (var i = 0; i < 10; i ++) {var monthArray = new Array();for (var j = 0; j < 12; j ++) {//月的最后一天var year = i + 2016;var month = j;var lastDay = new Date(year, month + 1, 0).getDate();//month 要加1,原本month是从0开始的,但是因为0是这个月的上个月,所以到了上个月.if(year == 2016 && month == 1) {console.log("lastday" + lastDay);}var dayArray = new Array();for(var k = 0; k < lastDay; k ++) {var day = new Object();day.value = k + 1 + "日";day.text = k + 1 + "日";dayArray.push(day);}var month = new Object();month.children = dayArray;month.value = j + 1 + "月";month.text = j + 1 + "月";monthArray.push(month);}var year = new Object();year.value = i + 2016 + "年" ;year.text = i + 2016 + "年";year.children = monthArray;yearArray.push(year);};console.log(yearArray);// 小时分钟var hoursec = new Array();for (var i = 0; i < 24; i ++) {var hsChildrenArray = new Array();for (var j = 0; j < 60; j ++) {var childrenObject = new Object();var secTrue = j ;if(j < 10) {var secTrue = j ;childrenObject.value = "0" + secTrue;childrenObject.text = "0" + secTrue;}else {childrenObject.value = secTrue ;childrenObject.text = secTrue;}hsChildrenArray.push(childrenObject);}var object = new Object();if(i < 10) {object.value = "0" + i + ":" ;object.text = "0" + i + ":";}else {object.value = i +":" ;object.text = i + ":";}object.children = hsChildrenArray;hoursec.push(object);};});})(mui, document);
效果图:
年月日
小时分钟
效果只有在手机端或者手机chrome的手机模拟器中可以看到。