Mui dtpicker设置当前日期时间为默认选中值的步骤

效果图
Mui dtpicker设置当前日期时间为默认选中值的步骤_第1张图片

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

你可能感兴趣的:(JavaScript)