引入資源:
全局引入樣式:
main.js引入:
import '../static/css/mui.picker.min.css'
引入js,
html使用控件:
<span id='pickDateBtn-chuzhi' data-options='{"type":"date"}' class="btn">選擇日期 ...</span>
js代碼:
var _this = this;
_this.initMuiNumbox();
_this.initViewData();
(function($) {
$.init();
var result = $("#result")[0];
var btns = $(".btn");
btns.each(function(i, btn) {
btn.addEventListener(
"tap",
function() {
var _self = this;
if (_self.picker) {
_self.picker.show(function(rs) {
console.log(rs.value);
console.log(i);
btn.innerText = rs.text;
_this.setLimitData(i, rs.text);
_self.picker.dispose();
_self.picker = null;
});
} else {
var optionsJson = this.getAttribute("data-options") || "{}";
var options = JSON.parse(optionsJson);
var id = this.getAttribute("id");
/*
* 首次顯示時實例化組件
* 示例爲了簡潔,將 options 放在了按鈕的 dom 上
* 也可以直接通過代碼聲明 optinos 用於實例化 DtPicker
*/
_self.picker = new mui.DtPicker(options);
_self.picker.show(function(rs) {
btn.innerText = "選擇結果: " + rs.text;
_this.setLimitData(i, rs.text);
/*
* 返回 false 可以阻止選擇框的關閉
* return false;
*/
_self.picker.dispose();
_self.picker = null;
});
}
},
false
);
});
})(mui);