先看效果圖
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">
自定義組件樣式顷锰，可根據(jù)自己需要自行改變
<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>
接下來實(shí)例化組件
<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", //設(shè)置日歷初始化
beginYear: 1898, //設(shè)置開始日期
endDate: new Date //設(shè)置結(jié)束日期
});
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 可以阻止選擇框的關(guān)閉
* return false;
*/
/*
* 釋放組件資源，釋放后將將不能再操作組件
* 通常情況下伤疙，不需要示放組件银酗，new DtPicker(options) 后，可以一直使用徒像。
* 當(dāng)前示例黍特，因?yàn)閮?nèi)容較多，如不進(jìn)行資原釋放锯蛀，在某些設(shè)備上會較慢灭衷。
* 所以每次用完便立即調(diào)用 dispose 進(jìn)行釋放，下次用時再創(chuàng)建新實(shí)例旁涤。
*/
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 可以阻止選擇框的關(guān)閉
//return false;
});
}, false);
})(mui, document);
</script>
加我微信公眾號【皮蛋餡兒】翔曲，一起學(xué)習(xí)哦~
