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、页面效果