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

效果图
在这里插入图片描述

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);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值