效果图
step1 引用js
资源地址:https://github.com/dcloudio/mui/
<script src="Content/Js/my-control/translate/mui.js" type="text/javascript" charset="utf-8"></script>
<script src="Content/Js/my-control/translate/mui.picker.js" type="text/javascript" charset="utf-8"></script>
<script src="Content/Js/my-control/translate/mui.dtpicker.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="Content/Js/my-control/translate/mui.dtpicker.css" />
<link rel="stylesheet" type="text/css" href="Content/Css/translate/mui.css" />
<link rel="stylesheet" type="text/css" href="Content/Css/translate/mui.picker.css" />
step2 使用时间选择器的页面进行dtpicker的简单设置
选中输入框出现时间选择器
<input type="text" id="time" class="form-control p5 departureDate" placeholder="入住日期" name="Time" runat="server" />
<script>
//datepicker
(function ($, doc) {
$.init();
$.ready(function () {
var dtpicker = new mui.DtPicker({
type: "date",//设置日历初始视图模式
beginDate: new Date(2018, 00, 01),//设置开始日期
endDate: new Date(2025, 12, 31),//设置结束日期
labels: ['年', '月', '日'],//设置默认标签区域提示语
});
$(document).on('click', ".departureDate", function (event) {
var _this = this;
dtpicker.show(function (e) {
console.log(e);
_this.value = e.text;
},false)
})
});
})(mui, document);
</script>
step3 修改引用的mui.dtpicker.js,设置默认选中的时间
(function ($, document) {
var myDate = new Date();
//获取当前年
var my_y = myDate.getYear() + "";
//获取当前月
var my_m = myDate.getMonth()+1 + "";
//获取当前日
if (my_m.length < 2) {
my_m = "0" +my_m;
}
var my_d = myDate.getDate() + "";
if (my_d.length < 2) {
my_d = "0" + my_d;
}
var my_h = myDate.getHours() + "";
if (my_h.length < 2) {
my_h = "0" +my_h;
}
var my_i = myDate.getMinutes() + "";
if (my_i.length < 2) {
my_i = "0" + my_i;
}
......
将当前年月日时分替换js文件里的current,就搞定了!
ui.y.picker.setSelectedValue(my_y);