mui原生日期选择器封装

插件js

/*  时间选择器封装 @山东-三言  
 *  共有两种初始化方式：  
 *  @第一种方式：mui(".mui-getDate").getDateInfo();       类名可以随便定义,优点可以定义多项，缺点无法设置回调函数  
 *  @第二种方式：var test = new mui.getDateInfo(document.getElementById("testGetDate"),function(d){alert(d)});      
 *      @第一个参数为element类型，就是要初始化的节点  
 *      @第二个参数为function类型，回调函数，回调的有一个参数为获取的时间字符串  
 * ------------------------------------------------------------  
 *  时间类型说明              例子  
 *  data命名  data-dateType   <input class="mui-getDate" data-dateType="date" id='' name=''>  
 *                
 *  可选值 返回结果说明  
 *  date    日期类型，例如 2016-11-11  
 *  time    时间类型，例如 18:22       24小时制  
 *  @! 如果不设置data-dateType默认为date类型  
 * ------------------------------------------------------------  
 * 【data-dateType为date类型】    !!!刚给data-minDate和data-maxDate增加了一个active的值，如果传active可以设置为当前日期  
 * data参数名              说明          默认值 格式都为"2016-11-11"      
 * data-defaultDate     默认选中的时间 当前日期  
 * data-minDate         日期最小值       无  
 * data-maxDate         日期最大值       无  
 *   
 * 【data-dateType为time类型】  
 * data参数名              说明                  默认值 格式都为"13:22"   
 * data-defaultDate     data-defaultDate    12:00     
 * -----------------------------------------------------------  
 * 返回值  如果有回调函数会调用回调函数，返回值为选中的日期字符串  
 *      当element为input的时候会设置value为选中的日期字符串  
 */  
(function($) {  
    var GetDateInfo = $.getDateInfo = $.Class.extend({  
        init: function(element, fun) {  
            var self = this;  
            if(element.nodeType) {  
                self.ele = element;  
                fun && (self.fun = fun);  
                self.EventInit();  
            } else {  
                throw new Error('传入的参数不是Element类型！');  
            }  
            return self;  
        },  
        //绑定事件  
        EventInit: function() {  
            var self = this,  
                selfEle = this.ele,  
                isBindingEvent = selfEle.hasAttribute("data-getDate-event"); //是否绑定点击事件  
            !isBindingEvent && selfEle.addEventListener("tap", function() {  
                self.getDate()  
            }), selfEle.setAttribute("data-getDate-event", true); //绑定点击事件  
            !selfEle.hasAttribute("readonly") && selfEle.tagName == 'INPUT' && selfEle.setAttribute("readonly", "readonly"); //如果是INPUT添加禁用状态  
            return self;  
        },  

        /*为了不犯和官方numbox插件不能动态设置最大值和最小值的错误，本插件采用的都是实时获取attr的值*/  
        getDate: function() {  
            var self = this,  
                selfEle = self.ele,  
                attrDateType = selfEle.getAttribute("data-dateType") || "date";  
                attrDateType == "date" && self.setDate();  
                attrDateType == "time" && self.setTime();  
            return self;  
        },  
        setDate: function() {  
            var self = this,  
                selfEle = self.ele,  
                attrDefaultDate = selfEle.getAttribute("data-defaultDate"), //获取attr设置的当前日期  
                dDate = new Date(), //当前日期对象  
                activeDate = [dDate.getFullYear(), dDate.getMonth(), dDate.getDate()], //获取当前日期  
                attrMinDate = selfEle.getAttribute("data-minDate"), //获取最小日期  
                attrMaxDate = selfEle.getAttribute("data-maxDate"), //获取最大日期  
                minDate, maxDate; //最大值、最大值对象  

            /*设置默认日期*/  
            attrDefaultDate ? dDate = self.setDateStr(attrDefaultDate) : dDate.setFullYear(activeDate[0], activeDate[1], activeDate[2]);  
            /*设置最小日期*/  
            attrMinDate && (minDate = attrMinDate=="active"?self.setDateObj(activeDate):self.setDateStr(attrMinDate));  
            /*设置最大日期*/  
            attrMaxDate && (maxDate = attrMaxDate=="active"?self.setDateObj(activeDate):self.setDateStr(attrMaxDate));  

            plus && plus.nativeUI.pickDate(function(e) {  
                var d = e.date,  
                    dStr = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();  

                selfEle.tagName == 'INPUT' && (selfEle.value = dStr);  
                self.fun && self.fun(dStr);  
            }, function(e) {  

            }, {  
                title: "请选择日期",  
                date: dDate,  
                minDate: minDate,  
                maxDate: maxDate  
            });  
            return self;  
        },  
        setTime: function() {  
            var self = this,  
                selfEle = self.ele,  
                attrDefaultTime = selfEle.getAttribute("data-defaultTime")?selfEle.getAttribute("data-defaultTime").split(":"):null,  
                dTime = new Date();  

            attrDefaultTime?dTime.setHours(attrDefaultTime[0], attrDefaultTime[1]):dTime.setHours(12, 0);  
            plus.nativeUI.pickTime(function(e) {  
                var d = e.date,  
                    dStr = d.getHours() + ":" + d.getMinutes();  

                selfEle.tagName == 'INPUT' && (selfEle.value = dStr);  
                self.fun && self.fun(dStr);  
            }, function(e) {  

            }, {  
                title: "请选择时间",  
                is24Hour: true,  
                time: dTime  
            });  
            return self;  
        },  
        setDateStr: function(str) {  
            if(typeof str === 'string') {  
                var returnAry = str.split("-").map(function(item, index) {  
                    if(index == 1) {  
                        return +item - 1;  
                    } else {  
                        return +item;  
                    }  
                });  
                var dateObj = new Date();  
                dateObj.setFullYear(returnAry[0], returnAry[1], returnAry[2]);  
                return dateObj;  
            } else {  
                throw new Error('传入的参数不是字符串类型！');  
            }  
        },  
        setDateObj: function(dateAry){  
            var d = new Date();  
                d.setFullYear(dateAry[0],dateAry[1],dateAry[2]);  
            return d;  
        }  
    });  

    $.fn.getDateInfo = function() {  
        this.each(function(i, item) {  
            if(item.GetDateInfo) {  
                return false;  
            } else {  
                item.getDateInfo = new GetDateInfo(item);  
                return true;  
            }  
        });  
    };  
})(mui);

前台代码

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title></title>  
        <script src="js/mui.min.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
        </script>  
        <style type="text/css">  
            #test2 {  
                margin: 20px auto;  
                width: 300px;  
                background-color: #007AFF;  
                padding: 10px;  
                color: #fff;  
                margin-bottom: 15px;  
                border-radius: 4px;  
                text-align: center;  
            }  
            input {  
-webkit-user-select: auto !important;  
}  
        </style>  
    </head>  

    <body>  
        <form class="mui-input-group">  
            <span style="display: block;text-align: center;line-height: 40px;color:#0062CC;background-color: #f7f7f7;;">本插件只在app中有效</span>  
            <div class="mui-input-row">  
                <label>无data参数</label>  
                <input type="text" class="mui-input-clear " placeholder="无data参数">  
            </div>  
            <div class="mui-input-row">  
                <label>选择日期</label>  
                <input type="text" data-dateType="date" class="mui-input-clear" placeholder="选择日期">  
            </div>  
            <div class="mui-input-row">  
                <label>选择时间</label>  
                <input type="text" data-dateType="time" class="mui-input-clear" placeholder="选择时间">  
            </div>  
            <div class="mui-input-row">  
                <label>日期默认值</label>  
                <input type="text" data-defaultDate="2016-11-11" class="mui-input-clear" placeholder="日期默认值">  
            </div>  
            <div class="mui-input-row">  
                <label style="width: 60%;">日期默认、最大最小值</label>  
                <input class="mui-input-clear" data-defaultDate="2016-11-11" data-minDate="2016-11-2" data-maxDate="2016-11-28" placeholder="日期默认、最大最小值" style="width:40%" type="text">  
            </div>  
            <div class="mui-input-row">  
                <label style="width: 50%;">dateTime类型</label>  
                <input class="mui-input-clear" data-dateType="dateTime" data-defaultDate="2016-11-11" data-minDate="2016-11-2" data-maxDate="2016-11-28" data-defaultTime="18:22" placeholder="dateTime类型" style="width:50%" type="text">  
            </div>  
            <div class="mui-input-row">  
                <label>时间默认,</label>  
                <input class="mui-input-clear" data-dateType="time" data-defaultTime="16:32" placeholder="时间默认" type="text">  
            </div>  

            <div id="test2" data-dateType="time">选择时间,动态设置，支持任何参数设置</div>  
            <p class="mui-text-center">更多的组合效果等你来发掘！</p>  
            <script src="js/getDate.js" type="text/javascript" charset="utf-8"></script>  
            <script type="text/javascript">  
                mui.plusReady(function() {  
                    //第一种方法调用，可以为N个元素绑定日期选择  
                    mui("input").getDateInfo();  
                    //第二种方法，可以设置回调函数,第一个返回值为日期字符串，第二个是返回当前的element  

                    var test = new mui.getDateInfo(document.getElementById("test2"), function(d, el) {  
                        //切换状态  
                        var state = el.getAttribute("data-dateType") == "time" ? "date" : "time";  
                        alert("选择的日期为：" + d + "\n我的状态变成了：" + state + "\n在单击下我试试看");  
                        //设置状态  
                        el.setAttribute("data-dateType", state);  
                    });  
                });  
            </script>  
        </form>  
    </body>  

</html>

2016-11-25日更新日志
·增加了新的data-dateType类型 "dateTime"
支持可以同时选择日期和时间，各项设置参数都通用

下面是修改后的js源码

(function($) {  
    var GetDateInfo = $.getDateInfo = $.Class.extend({  
        init: function(element, fun) {  
            var self = this;  
            if(element.nodeType) {  
                self.ele = element;  
                fun && (self.fun = fun);  
                self.EventInit();  
            } else {  
                throw new Error('传入的参数不是Element类型！');  
            }  
            return self;  
        },  
        //绑定事件  
        EventInit: function() {  
            var self = this,  
                selfEle = this.ele,  
                isBindingEvent = selfEle.hasAttribute("data-getDate-event"); //是否绑定点击事件  
            !isBindingEvent && selfEle.addEventListener("tap", function() {  
                self.getDate()  
            }), selfEle.setAttribute("data-getDate-event", true); //绑定点击事件  
            !selfEle.hasAttribute("readonly") && selfEle.tagName == 'INPUT' && selfEle.setAttribute("readonly", "readonly"); //如果是INPUT添加禁用状态  
            return self;  
        },  

        /*为了不犯和官方numbox插件不能动态设置最大值和最小值的错误，本插件采用的都是实时获取attr的值*/  
        getDate: function() {  
            var self = this,  
                selfEle = self.ele,  
                attrDateType = self.dateType = selfEle.getAttribute("data-dateType") || "date";  
                attrDateType == "date" && self.setDate();  
                attrDateType == "time" && self.setTime();  
                attrDateType == "dateTime" && self.setDateTime();  
            return self;  
        },  
        setDate: function(fn) {  
            var self = this,  
                selfEle = self.ele,  
                attrDefaultDate = selfEle.getAttribute("data-defaultDate"), //获取attr设置的当前日期  
                dDate = new Date(), //当前日期对象  
                activeDate = [dDate.getFullYear(), dDate.getMonth(), dDate.getDate()], //获取当前日期  
                attrMinDate = selfEle.getAttribute("data-minDate"), //获取最小日期  
                attrMaxDate = selfEle.getAttribute("data-maxDate"), //获取最大日期  
                minDate, maxDate; //最大值、最大值对象  

            /*设置默认日期*/  
            attrDefaultDate ? dDate = self.setDateStr(attrDefaultDate) : dDate.setFullYear(activeDate[0], activeDate[1], activeDate[2]);  
            /*设置最小日期*/  
            attrMinDate && (minDate = attrMinDate=="active"?self.setDateObj(activeDate):self.setDateStr(attrMinDate));  
            /*设置最大日期*/  
            attrMaxDate && (maxDate = attrMaxDate=="active"?self.setDateObj(activeDate):self.setDateStr(attrMaxDate));  

            plus && plus.nativeUI.pickDate(function(e) {  
                var d = e.date,  
                    dStr = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();  

                if(self.dateType == 'dateTime'){  
                    fn && fn(dStr);  
                }else{  
                    selfEle.tagName == 'INPUT' && (selfEle.value = dStr);  
                    self.fun && self.fun(dStr);  
                }  
            }, function(e) {  

            }, {  
                title: "请选择日期",  
                date: dDate,  
                minDate: minDate,  
                maxDate: maxDate  
            });  
        },  
        setTime: function(fn) {  
            var self = this,  
                selfEle = self.ele,  
                attrDefaultTime = selfEle.getAttribute("data-defaultTime")?selfEle.getAttribute("data-defaultTime").split(":"):null,  
                dTime = new Date();  

            attrDefaultTime?dTime.setHours(attrDefaultTime[0], attrDefaultTime[1]):dTime.setHours(12, 0);  
            plus.nativeUI.pickTime(function(e) {  
                var d = e.date,  
                    dStr = d.getHours() + ":" + d.getMinutes();  

                if(self.dateType == 'dateTime'){  
                    fn && fn(dStr);  
                }else{  
                    selfEle.tagName == 'INPUT' && (selfEle.value = dStr);  
                    self.fun && self.fun(dStr);  
                }  
            }, function(e) {  

            }, {  
                title: "请选择时间",  
                is24Hour: true,  
                time: dTime  
            });  
            return self;  
        },  
        setDateTime:function(){  
            var self = this,  
                selfEle = self.ele,  
                returnDateStr = '';  
            self.setDate(function(str){  
                returnDateStr = str;  
                self.setTime(function(str){  
                    returnDateStr +=' '+str;  
                    selfEle.tagName == 'INPUT' && (selfEle.value = returnDateStr);  
                    self.fun && self.fun(returnDateStr);  
                });  
            })  
        },  
        setDateStr: function(str) {  
            if(typeof str === 'string') {  
                var returnAry = str.split("-").map(function(item, index) {  
                    if(index == 1) {  
                        return +item - 1;  
                    } else {  
                        return +item;  
                    }  
                });  
                var dateObj = new Date();  
                dateObj.setFullYear(returnAry[0], returnAry[1], returnAry[2]);  
                return dateObj;  
            } else {  
                throw new Error('传入的参数不是字符串类型！');  
            }  
        },  
        setDateObj: function(dateAry){  
            var d = new Date();  
                d.setFullYear(dateAry[0],dateAry[1],dateAry[2]);  
            return d;  
        }  
    });  

    $.fn.getDateInfo = function() {  
        this.each(function(i, item) {  
            if(item.GetDateInfo) {  
                return false;  
            } else {  
                item.getDateInfo = new GetDateInfo(item);  
                return true;  
            }  
        });  
    };  
})(mui);