日期选择器
引入文件
// 文件在GitHub的mui中的plugin中picker文件夹中
<link rel="stylesheet" href="../assets/picker/css/mui.picker.css">
<link rel="stylesheet" href="../assets/picker/css/mui.dtpicker.css">
<script src="../assets/picker/js/mui.picker.js"></script>
<script src="../assets/picker/js/mui.dtpicker.js"></script>
js文件中初始化
// 点击页面上选择日期按钮
$('#come').click(function () {
// 格式化今天日期
var t = new Date();
var year = t.getFullYear();
var month = t.getMonth()+1>9?t.getMonth()+1:`0${t.getMonth()+1}`; //两位数
var day = t.getDate()>9?t.getDate():`0${t.getDate()}`;
// 初始化日期
var dtPicker = new mui.DtPicker({
type: 'date', //设置日期类型为年月日
beginDate: new Date(year,month, day), //设置开始日期为今天
endDate: new Date(year, 11, 30), //设置结束日期为当年年底
});
// 显示日期选择器show()方法,参数e.value可以获取用户选中的日期
dtPicker.show(function (e) {
console.log(e);
console.log(e.value); //点击确定用户选中的日期
console.log(e.y.text); //年
console.log(e.m.text); //月
console.log(e.d.text); //日
})
})
地址选择器
引入css和js文件
<link rel="stylesheet" href="../assets/picker/css/mui.picker.css">
<link rel="stylesheet" href="../assets/picker/css/mui.poppicker.css">
<script src="../assets/picker/js/mui.picker.js"></script>
<script src="../assets/picker/js/mui.poppicker.js"></script>
js代码
// 点击郑州的获取数据
var data=[{
value: '110000',
text: '北京市',
children: [{
value: "110101",
text: "东城区"
}]
}, {
value: '120000',
text: '天津市',
children: [{
value: "120101",
text: "和平区"
}, {
value: "120102",
text: "河东区"
}, {
value: "120104",
text: "南开区"
}
]
}];
// 点击
$('#allAddress').click(function () {
var picker = new mui.PopPicker({
layer: 2
});
picker.setData(data);
picker.show(function (e) {
console.log(e); // 用户选择的参数
})
})