先看效果图
Paste_Image.png
NOO1I2_}_7(94065DBORY7B.png
引入css
<link href="css/mui.min.css" rel="stylesheet">
<link href="css/mui.picker.min.css" rel="stylesheet">
<link href="css/mui.poppicker.css" rel="stylesheet">
自定义组件样式，可根据自己需要自行改变
<style>
p {
color: #333;
margin-bottom: 5px;
}
.time, .place {
display: -webkit-box;
display: -webkit-flex;
display: flex;
margin-bottom: 10px;
}
.time .mui-btn-block, .place .mui-btn-block {
padding: 8px 10px;
margin-bottom: 0;
font-size: 12px;
border: none;
border-radius: 5px;
color: #272727;
}
</style>
<p>日期</p>
<div class="time">
<input name="birthday" type="hidden" id="birthday" value="">
<button id="birthdayBtn" class="btn mui-btn mui-btn-block">请选择日期...</button>
</div>
<p>地址</p>
<div class="place">
<input name="address" type="hidden" id="address" value="">
<button id='addressBtn' class="mui-btn mui-btn-block" type='button'>请选择地址</button>
</div>
引入js
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>
<script src="js/mui.poppicker.js"></script>
<script src="js/city.data.js"></script>
<script src="js/city.data-3.js"></script>
接下来实例化组件
<script>
(function($, doc) {
var _getParam = function(obj, param) {
return obj[param] || '';
};
var cityPicker3 = new $.PopPicker({
layer: 3
});
// 出生年月
var birthday = doc.getElementById('birthday').value;
var birthdayBtn = doc.getElementById('birthdayBtn');
birthdayBtn.addEventListener('tap', function() {
var optionsJson = this.getAttribute('data-options') || '{}';
var options = JSON.parse(optionsJson);
var id = this.getAttribute('id');
var picker = new $.DtPicker({
type: "date", //设置日历初始化
beginYear: 1898, //设置开始日期
endDate: new Date //设置结束日期
});
picker.show(function(rs) {
/*
* rs.value 拼合后的 value
* rs.text 拼合后的 text
* rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
* rs.m 月，用法同年
* rs.d 日，用法同年
* rs.h 时，用法同年
* rs.i 分（minutes 的第二个字母），用法同年
*/
birthdayBtn.innerText = rs.text;
birthday = rs.text;
console.log(birthday);
/*
* 返回 false 可以阻止选择框的关闭
* return false;
*/
/*
* 释放组件资源，释放后将将不能再操作组件
* 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
* 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
* 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
*/
picker.dispose();
});
}, false);
// 地址
cityPicker3.setData(cityData3);
var addressBtn = doc.getElementById('addressBtn');
addressBtn.addEventListener('tap', function(event) {
cityPicker3.show(function(items) {
var address = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
addressBtn.innerText = address;
console.log(address)
// 返回 false 可以阻止选择框的关闭
//return false;
});
}, false);
})(mui, document);
</script>
加我微信公众号【皮蛋馅儿】，一起学习哦~
