MUI官方网文本文档点此

(一)准备工作,下载有关的js、cs文件,详细地址

MUI框架 picker日期选择器实例 数据库 第1张

(二)新创建一般html网页页面

  1)引入有关js、cs文件

  2) 一个input,纪录下id:

<form>
         <label for="dateSelect">请选择日期</label>
         <input type="text" id="dateSelect"/>
</form>

 

3)关键编码:

<script type="text/javascript">
    $(function () {
        $("#dateSelect").click(function () {
            var dtPicker = new mui.DtPicker({ type: 'date' });
            /*主要参数:'datetime'-详细时间主视图(年月日时分)
                    'date'--年主视图(时间日期)
                    'time' --時间主视图(时候)
                    'month'--月主视图(年月)
                    'hour'--时主视图(年月日时)
            */      
            dtPicker.show(function (selectItems) {
               var y = selectItems.y.text;  //获得挑选的年
               var m = selectItems.m.text;  //获得挑选的月
               var d = selectItems.d.text;  //获得挑选的日
               var date = y   "-"   m   "-"   d ; 
               $("#dateSelect").val(date); 
            })
        });
    })
</script>

这儿留意 selectItems.y.text 取到的是字符串类型,selectItems.y.value取到的是值种类,一般来说,取字符串数组,便捷传送。

 

(三)开启你的电脑浏览器,看一下成效吧!

  MUI框架 picker日期选择器实例 数据库 第2张