美文网首页工作生活
Mui DtPicker 日期控件设置只能展示指定日期以后的日期

Mui DtPicker 日期控件设置只能展示指定日期以后的日期

作者: join_huang | 来源:发表于2019-07-01 09:41 被阅读0次

    1、引入mui相关资源库文件

         <!--引入mui资源->

        <link href="appresources/css/mui.min.css" rel="stylesheet" />

        <script src="appresources/js/mui.min.js"></script>

        <!--引入mui.picker资源->

        <script src="appresources/plugins/picker/js/mui.picker.min.js"></script>

        <link href="appresources/plugins/picker/css/mui.picker.min.css" rel="stylesheet" />

    2、初始化 mui

        <script>

       $ (function (){

            mui.init ();//初始化

           $ ("#yysjSelect").click (function (){

           //获取当前时间

           var date = new Date();

           //设置天数 +1 天,日期范围可以自定义加减,年份和月份加减同理

           date.setDate(date.getDate()+3);

           var year = date.getFullYear ();//获取日期自定义后的年份

           var  month=date.getMonth()+1;//获取日期自定义后的月份

           var day=date.getDate();//获取日期自定义后的日期

            //重新定义DtPicker控件数据,日期格式如下:

         {"type":"date","beginYear":year,"beginMonth":month,"beginDay":day}

          var dtPicker = new mui.DtPicker({"type":"date","beginYear":year,"beginMonth":month,"beginDay":day});

                    //选择日期的相关操作

                    dtPicker.show (function (selectItems){

                        var y = selectItems.y.text; //获取选择的年

                        var m = selectItems.m.text; //获取选择的月

                        var d = selectItems.d.text; //获取选择的日

                        var date = y + "-" + m + "-" + d;//拼接日期

                        $ ("#yysj").val (date);//为时间隐藏输入框赋值,这是为了向后台传值需要,如果不与后台交互,可省略

                        $ ("#yysjHtml").html (date);//为时间展示标签赋值

                        $ (".rightspan").removeClass ("wxzspan");//去掉Li后面的箭头

                        dtPicker.dispose();//关闭日期控件,释放资源。

                });

                };

             });

    3、定义日期选择元素

            <li class="mui-table-view-cell" id="yysjSelect">预约时间 

                <span class="f14 rightspan wxzspan" id="yysjHtml">请选择</span> 

                <input type="hidden" id="yysj" name="yysj" /> 

                <span class="mui-navigate-right"></span>

            </li>

    4、页面效果

    相关文章

      网友评论

        本文标题:Mui DtPicker 日期控件设置只能展示指定日期以后的日期

        本文链接:https://www.haomeiwen.com/subject/rquwcctx.html