比Jquery还要漂亮的H5时间控件

需求背景

之前在工作中写了一个兼容手机端的H5页面，用的是原生的时间控件，这样会调用每个手机自带的时间控件，不过在IOS上显示是英文的，所以为了解决这个问题，决定用一个时间控件(picker),用过Jquery自带的不过太丑了，然后用过bootstrp-picker.min.js的插件，最后还是选择使用了mui-picker.min.js。简单实用。

详细教程

先要导入mui.picker.min.js和css（注：别忘了引入jquery）

下载地址：https://download.csdn.net/download/qq_39940674/10911610

<script src="js/mui.picker.min.js"></script>
<link rel="stylesheet" href="css/mui.picker.min.css">

 HTML代码

data-options样式中type属性：

1.date 年月日

2.datatime 年月日时分

3.month 年月

4.time 时分

5.hour年月日时段 

<div class="mui-input-row" id='enddate' data-options='{"type":"date"}'>
<label></label>
<input id="js" name="endtime" style="height: 40px" placeholder="请填写结束时间 (必填)">
</div>

Js代码

通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。

$(function() {
  document.getElementById("stardate").addEventListener('tap', function () {
                var dDate = new Date();
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                var picker = new mui.DtPicker(options);
                picker.show(function (rs) {
                    console.log(rs)
                    var timestr = rs.text;
                    $('#ks').val(timestr);
                    picker.dispose();
                });
            })
	
  });

效果