首先我们先来看原始的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-scalable=no" />
 <title></title>
 <!--标准mui.css-->
 <link rel="stylesheet" href="../css/mui.min.css">
 <!--App自定义的css-->
 <link rel="stylesheet" type="text/css" href="../css/app.css" />
 <link href="../css/mui.picker.css" rel="stylesheet" />
 <link href="../css/mui.poppicker.css" rel="stylesheet" />
 <!--<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />-->
 <style>
  .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;
  }
 </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">picker(选择器)</h1>
 </header>
 <div class="mui-content">
  <div class="mui-content-padded">
  <h5 class="mui-content-padded">原生 SELECT</h5>
  <select class="mui-btn mui-btn-block">
   <option value="item-1">item-1</option>
   <option value="item-2">item-2</option>
   <option value="item-3">item-3</option>
   <option value="item-4">item-4</option>
   <option value="item-5">item-5</option>
  </select>
  <br />
  <p>原生 SELECT(选择框)在不同的设备上UI可能会有差异,并且不支持多级联动(多个 SELECT 可实现,但较麻烦),故mui封装了picker组件,参见如下示例。</p>
  <h5 class="mui-content-padded">普通示例</h5>
  <button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>一级选择示例 ...</button>
  <div id='userResult' class="ui-alert"></div>
  <h5 class="mui-content-padded">级联示例</h5>
  <button id='showCityPicker' class="mui-btn mui-btn-block" type='button'>二级联动示例 ...</button>
  <div id='cityResult' class="ui-alert"></div>
  <button id='showCityPicker3' class="mui-btn mui-btn-block" type='button'>三级联动示例 ...</button>
  <div id='cityResult3' class="ui-alert"></div>
  </div>
 </div>
 <script src="/UploadFiles/2021-04-02/mui.min.js">

在此基础上修改为类似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);

效果图:

jQuery基于muipicker实现仿ios时间选择

年月日

jQuery基于muipicker实现仿ios时间选择

小时分钟

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

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

标签:
jQuery,muipicker,IOS时间选择

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“jQuery基于muipicker实现仿ios时间选择”

暂无“jQuery基于muipicker实现仿ios时间选择”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。