首先我们先来看原始的muipicker的例子

 
 
 
 
 
 
 
 
 
 
 
 
  .mui-btn {
  font-size: 16px;
  padding: 8px;
  margin: 3px;
  }
  h5.mui-content-padded {
  margin-left: 3px;
  margin-top: 20px !important;
  }
  h5.mui-content-padded:first-child {
  margin-top: 12px !important;
  }
  .ui-alert {
  text-align: center;
  padding: 20px 10px;
  font-size: 16px;
  }
 
 

 
 

  
  
picker（选择器）
 
 
  
  
原生 SELECT
  
   item-1
   item-2
   item-3
   item-4
   item-5
  
  

  
原生 SELECT（选择框）在不同的设备上UI可能会有差异，并且不支持多级联动(多个 SELECT 可实现，但较麻烦)，故mui封装了picker组件，参见如下示例。
  
普通示例
  一级选择示例 ...
  
  
级联示例
  二级联动示例 ...
  
  三级联动示例 ...
  
  
 
 
 
 
 
 
 
 
 

在此基础上修改为类似ios选择时间的插件。

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

(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的手机模拟器中可以看到。

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