mui日期选择器html,Mui picker（选择器）日期、地址组件的使用

先看效果图

Paste_Image.png

NOO1I2_}_7(94065DBORY7B.png

引入css

自定义组件样式，可根据自己需要自行改变

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;

}

日期

请选择日期...

地址

请选择地址

引入js

接下来实例化组件

(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);

加我微信公众号【皮蛋馅儿】，一起学习哦~