模仿win10样式，基于jquery的时间控件

工作需要，写了一个基于jquery的时间控件，仿win10系统时间控件格式。

目前基本功能都有了，但时间格式只实现少数，但由于结构设计已经充分优化，填充起来非常容易。

这个控件相对网上其他的时间控件，代码少，易阅读，修改拓展方便，也适合新手参考学习。

if (typeof jQuery === 'undefined') { throw 'no jquery'; }
(function () {
    window.UE_CONTROL_IDX = 0;
    $.fn.GetRect = function () {
        var r = $(this).get(0).getBoundingClientRect(),
            t = document.documentElement.clientTop,
            l = document.documentElement.clientLeft;
        return {
            top: r.top - t,
            bottom: r.bottom - t,
            left: r.left - l,
            right: r.right - l
        }
    }
    'use strict';
    window.UEDate || (window.UEDate = {
        viewTypes: {
            's': 'yyyy-MM-ddThh:mm:ss',
            't': 'h:m',
            'y': 'y年m月',
            'd': 'y/M/d/',
            'm': 'm月d日',
            'f': 'y年m月d日 h:m',
            'g': 'y/m/d h:m',
            'r': 'Sat, 05 Nov 2005 14:06:25 GMT',
            'u': 'yyyy-MM-dd hh:mm:ssZ',
            'T': 'h:m:s',
            'Y': 'y年m月',
            'D': 'y年m月d日',
            'M': 'm月d日',
            'F': 'y年m月d日 h:m:s',
            'G': 'y/m/d h:m:s',
            'R': 'Sat, 05 Nov 2005 14:06:25 GMT',
            'U': 'y年m月d日 h:m:s',
            'v': 'dd/MM/yyyy hh:mm:ss',
        },
        config: {
            viewType: 'v',
            width: 80,
            height:30,
            maxWidth: 360,
            maxHeight: 200,
            showBorder: true,
            BorderColor: "#666",
            BackColor: '#fff',
            value: null,
            fullMonth: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            simpleMonth: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.'],
            fullWeek: ['Monday', 'Tuesday', 'Wednesday', 'Thurday', 'Friday', 'Saturday', 'Sunday'],
            simpleWeek: ['Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.', 'Sun.'],
            style: ''
+ '<style id="ue_date_Style">'
+ '   .ue_date_frame {border:none;overflow:hidden;position:absolute;left:0;top:0;font-size:12px;user-select:none;margin: 0;padding: 1px;background-color:#fff;z-index:1;}'
+ '   .ue_date_content {border: 1px solid #fff;border-radius:2px;outline:none;position: relative;overflow:hidden;background-color:user-select:none; transparent;display: inline-block;float:left;padding:0 1px;height:18px;line-height:16px;}'
+ '   .ue_date_content:hover {border 1px solid #69c;}'
+ '   .ue_date_split {border: none;position: relative; overflow:hidden;width:6px;background-color: transparent;display: inline-block;float:left;padding:0;height:18px;line-height:20px;}'
+ '   .ue_date_over {border:none;width:210px; height:18px;overflow:hidden;text-align:center;position:relative;margin:5px 0;}'
+ '   .ue_date_over div {border:none;height:18px;line-height:18px;width:20px;text-align:center;border-radius:2px;cursor:pointer;}'
+ '   .ue_date_left {float:left;}.ue_date_left:hover{border:1px solid #69c;height:16px;line-height:16px;width:18px;}.ue_date_select {width:100px !important;display:inline-block;}.ue_date_right {float:right;}.ue_date_right:hover{border:1px solid #9cf;height:16px;line-height:16px;width:18px;}'
+ '   .ue_date_year {width:28px;}.ue_date_month {width:15px;} .ue_date_day {width:15px;}.ue_date_hour {width:15px;} .ue_date_minute {width:15px;} .ue_date_second {width:15px;}.ue_date_msec {width:28px;}'
+ '   .ue_date_pop {border:1px solid #999;border-radius:3px;width:210px;height:auto;overflow:hidden;position:absolute;font-size:12px;user-select:none;margin: 0;padding: 3px;background-color:#fff;display:none;z-index:2;}'
+ '   .ue_date_week {border:none;width:210px; height:18px;overflow:hidden;}'
+ '   .ue_date_week div {border:none;height:18px;line-height:18px;width:30px;text-align:center;border-radius:2px;display:inline-block;}'
+ '   .ue_date_dates {border:none;width:210px; height:auto;overflow:hidden;}.ue_date_selected {background:#9cf;}'
+ '   .ue_date_dates div {border:none;height:18px;line-height:18px;width:30px;text-align:center;border-radius:2px;display:inline-block;cursor:pointer;}'
+ '   .ue_date_months{border:none;width:210px; height:auto;overflow:hidden;display:none;}'
+ '   .ue_date_months div {border:none;height:18px;line-height:18px;width:42px;margin:5px;text-align:center;border-radius:2px;display:inline-block;cursor:pointer;}'
+ '   .ue_date_months div:hover {border:1px solid #69c;height:16px;line-height:16px;width:40px;}'
+ '   .ue_date_canhover{} .ue_date_canhover:hover {border:1px solid #69c;height:16px;line-height:16px;width:28px;}'
+ '   .ue_date_target {user-select:true;}'
+ '</style>',
        },
        toFixStr: function (value) {
            return (value < 10 ? '0' : '') + value;
        },
        getDateFromText: function (t, f) {
            if (t) {
                f = f || this.config.viewType;
                if (f == 'v') {
                    var s = t.split(' ');
                    var l = s[0].split('/');
                    t = l[2] + '-' + l[1] + '-' + l[0] + ' ' + (s.length > 1 ? s[1] : '');
                } else {
                    t = t.replace('T', ' ');
                }
                try{
                    return new Date(t);
                }catch(e){
                    return null;
                }
            } else {
                return null;
            }
        },
        getFmtDate: function (v, f) {
            f = f || this.viewType;
            switch (f) {
                case 's': {
                } break;
                case 't': {
                } break;
                case 'y': {
                } break;
                case 'd': {
                } break;
                case 'm': {
                } break;
                case 'f': {
                } break;
                case 'g': {
                } break;
                case 'r': {
                } break;
                case 'u': {
                    return v.getFullYear() + '-' + (v.getMonth() + 1) + '-' + v.getDate() + ' ' + v.getHours() + ':' + v.getMinutes() + ':' + v.getSeconds();
                } break;
                case 'v': {
                    return v.getDate() + '/' + (v.getMonth() + 1) + '/' + v.getFullYear() + ' ' + v.getHours() + ':' + v.getMinutes() + ':' + v.getSeconds();
                } break;
                default: {
                    return v.getFullYear() + '-' + (v.getMonth() + 1) + '-' + v.getDate() + ' ' + v.getHours() + ':' + v.getMinutes() + ':' + v.getSeconds();
                } break;
            }
        },
        showCalendar: function () {
            this.calendarDom = this.calendarDom || $(''
+ '<div class="ue_date_pop">'
+ '    <div class="ue_date_over">'
+ '        <div class="ue_date_left">◂</div>'
+ '        <div class="ue_date_select">2016年8月</div>'
+ '        <div class="ue_date_right">▸</div>'
+ '    </div>'
+ '    <div class="ue_date_week">'
+ '         <div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div><div>Sun</div>'
+ '    </div>'
+ '    <div class="ue_date_dates"></div>'
+ '    <div class="ue_date_months"></div>'
+ '</div>').appendTo($('body'));
            this.calendarDom.show();
            this.setCalendarDate(new Date(this.calendarYear, this.calendarMonth, 1, 0, 0, 0, 0));
            this.setCalendarPosition();
        },
        setCalendarPosition: function () {
            var ww = $(window).width(),
                wh = $(window).height(),
                bt = $('body').scrollTop(),
                bl = $('body').scrollLeft(),
                cw = this.calendarDom.outerWidth(),
                ch = this.calendarDom.outerHeight(),
                tw = this.target.outerWidth(),
                th = this.target.outerHeight(),
                rc = this.target.GetRect();
            if ((rc.top + th + ch + 5) < wh) {
                this.calendarDom.css({ top: rc.top + th });
            } else {
                this.calendarDom.css({ top: rc.top - ch });
            }
            if ((rc.left + cw) > ww) {
                this.calendarDom.css({ left: (ww - cw) });
            } else {
                this.calendarDom.css({ left: rc.left });
            }
        },
        setCalendarDate: function (dt) {
            $(".ue_date_week").show();
            $(".ue_date_months").hide();
            var y = dt.getFullYear(), m = dt.getMonth(), day = dt.getDay(),
                maxDay = (m == 1 ? (((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) ? 28 : 29) : (m == 3 || m == 5 || m == 8 || m == 10) ? 30 : 31),
                cnt = day + maxDay, p = $('.ue_date_dates').html('').show();
            for (var i = j = 1; i < cnt; i++) {
                if (i >= day && j <= maxDay) {
                    var o = $('<div class="ue_date_canhover">' + j + '</div>').appendTo(p);
                    if (j == this.date) {
                        o.addClass('ue_date_selected');
                    }
                    j++;
                } else {
                    p.append('<div></div>');
                }
            }
            $('.ue_date_select').html(this.config.fullMonth[m] + ',' + y);
            this.calendarYear = dt.getFullYear();
            this.calendarMonth = dt.getMonth();
            this.bindCalendarEvent('d');
        },
        setCalendarMonth: function (m) {
            $(".ue_date_week").hide();
            $(".ue_date_dates").hide();
            var d = $('.ue_date_months').html('').show();
            for (var i = 0; i < 12; i++) {
                var o = $('<div class="ue_date_canhover">' + this.config.simpleMonth[i] + '</div>').appendTo(d);
                if (i == this.month) {
                    o.addClass('ue_date_selected');
                }
            }
            $(".ue_date_select").html(this.calendarYear);
            this.bindCalendarEvent('m');
        },
        setCalendarYear: function (y) {
            var d = $('.ue_date_months').html('');
            for (var i = 0; i < 12; i++) {
                var o = $('<div class="ue_date_canhover">' + (y + i) + '</div>').appendTo(d);
                if ((y + i) == this.year) {
                    o.addClass('ue_date_selected')
                }
            }
            $(".ue_date_select").html(y + ' - ' + (y + 11));
            this.bindCalendarEvent('y');
        },
        bindCalendarEvent: function (type) {
            var dt = this;
            $('.ue_date_left').off('click').on('click', function () {
                if (type == 'd') {
                    var t = new Date(dt.calendarYear, dt.calendarMonth, 1, 0, 0, 0, 0);
                    t.setMonth(t.getMonth() - 1);
                    dt.setCalendarDate(t);
                }
                if (type == 'm') {
                    dt.calendarYear -= 1
                    $(".ue_date_select").html(dt.calendarYear);
                }
                if (type == 'y') {
                    var years = $(".ue_date_select").html().split('-');
                    var year = parseInt(years[0], 10);
                    dt.setCalendarYear(year - 12);
                }
            });
            $('.ue_date_right').off('click').on('click', function () {
                if (type == 'd') {
                    var t = new Date(dt.calendarYear, dt.calendarMonth, 1, 0, 0, 0, 0);
                    t.setMonth(t.getMonth() + 1);
                    dt.setCalendarDate(t);
                }
                if (type == 'm') {
                    dt.calendarYear += 1
                    $(".ue_date_select").html(dt.calendarYear);
                }
                if (type == 'y') {
                    var years = $(".ue_date_select").html().split('-');
                    var year = parseInt(years[0], 10);
                    dt.setCalendarYear(year + 12);
                }
            });
            $('.ue_date_select').off('click').on('click', function () {
                if (type == 'd') {
                    dt.setCalendarMonth();
                }
                if (type == 'm') {
                    dt.setCalendarYear(dt.calendarYear - 6);
                }
            });
            $('.ue_date_canhover').off('click').on('click', function () {
                if (type == 'd') {
                    var date = parseInt(this.innerHTML, 10);
                    dt.value = new Date(dt.calendarYear, dt.calendarMonth, date, dt.hour, dt.minute, dt.second, 0);
                    dt.setTargetValue();
                    $('.ue_date_frame').remove();
                    $('.ue_date_pop').hide();
                }
                if (type == 'm') {
                    arr = dt.config.simpleMonth;
                    for(var i in arr){
                        if (arr[i] == this.innerHTML) {
                            dt.calendarMonth = i;
                            var t = new Date(dt.calendarYear, i, 1, 0, 0, 0, 0);
                            dt.setCalendarDate(t);
                        }
                    }
                }
                if (type == 'y') {
                    dt.calendarYear = parseInt(this.innerHTML, 10);
                    dt.setCalendarMonth();
                }
            });

        },
        getMaxDate: function () {
            var y = parseInt(this.frameDom.find('.ue_date_year').val(), 10);
            var m = parseInt(this.frameDom.find('.ue_date_month').val(), 10);
            return (m == 2 ? (((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) ? 28 : 29) : (m == 4 || m == 6 || m == 9 || m == 11) ? 30 : 31);
        },
        changeValue: function (part, v) {
            var t = parseInt(v, 10);
            this[part] = part == 'month' ? t - 1 : t;
            this.value = new Date(this.year, this.month, this.date, this.hour, this.minute, this.second, 0);
        },
        bindEvent: function () {
            var dt = this;
            this.frameDom.find('input').off('blur').on('blur', function () {
                var v = this.value, o = $(this), part = o.attr('date_part'),
		            y = dt.value.getFullYear(),
		            m = dt.value.getMonth() + 1;
                if (isNaN(v) || v < 0
                 || (part == 'year'   && (v < 1900 || v > 2100))
                 || (part == 'month'  && (v < 1 || v > 12))
		         || (part == 'date'   && (v < 1 || v > 31 || (m == 2 ? (((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) ? v > 28 : v > 29) : (m == 4 || m == 6 || m == 9 || m == 11) ? v > 30 : v > 31)))
		         || (part == 'hour'   &&  v > 23)
		         || (part == 'minute' &&  v > 59)
		         || (part == 'second' &&  v > 59)) {
                    o.css({ borderColor: '#f00' }).focus();
                } else {
                    o.css({ borderColor: '#fff' });
                    dt.changeValue(part, v);
                }
            }).off('focus').on('focus',function () {
                var o = $(this), part = o.attr('date_part');
                if (o.css('borderColor') == 'rgb(255, 255, 255)') {
                    o.css({ borderColor: '#69c' });
                }
            });
            $(document).off('keyup').on('keyup', function (e) {
                e = e || window.event;
                var t = e.srcElement || e.target;
                if ($(t).hasClass('ue_date_content')) {
                    e.which = e.which == 13 ? 9 : e.which;
                    dt.keyStatus = 'keyup';
                }
            }).off('keydown').on('keydown', function (e) {
                e = e || window.event;
                var obj = document.activeElement;
                if ($(obj).hasClass('ue_date_content')) {
                    var v = parseInt(obj.value, 10);
                    switch (e.which) {
                        case 38: {//上向键
                            dt.keyStatus = 'key38down';
                            var min = $(obj).hasClass('ue_date_year') ? 1900 :
                                $(obj).hasClass('ue_date_month') ? 1 :
                                $(obj).hasClass('ue_date_day') ? 1 : 0;
                            var up = setInterval(function () {
                                if (dt.keyStatus == 'key38down') {
                                    if (v > min) {
                                        obj.value = dt.toFixStr(v--);
                                    } else {
                                        clearInterval(up);
                                    }
                                } else {
                                    clearInterval(up);
                                }
                            }, 100);
                            if (v > min) {
                                obj.value = dt.toFixStr(v -= 1);
                            }
                        } break;
                        case 40: {//下向键
                            dt.keyStatus = 'key40down';
                            var max = $(obj).hasClass('ue_date_year') ? 2100 :
                                $(obj).hasClass('ue_date_month') ? 12 :
                                $(obj).hasClass('ue_date_day') ? dt.getMaxDate() :
                                $(obj).hasClass('ue_date_hour') ? 23 : 59;
                            var down = setInterval(function () {
                                if (dt.keyStatus == 'key40down') {
                                    if (v < max) {
                                        obj.value = dt.toFixStr(v++);
                                    } else {
                                        clearInterval(down);
                                    }
                                } else {
                                    clearInterval(down);
                                }
                            }, 100);
                            if (v < max) {
                                obj.value = dt.toFixStr(v += 1);
                            }
                        } break;
                        default: break;
                    }
                }
            }).off('click').on('click', function (e) {
                e = e || window.event;
                var t = e.srcElement || e.target;
                var c = $(t).attr('class');
                if (!c || c.indexOf('ue_date_') == -1) {
                    dt.setTargetValue();
                    $('.ue_date_frame').remove();
                    $('.ue_date_pop').hide();
                }
            });
        },
        setTargetValue: function () {
            var v = this.getFmtDate(this.value);
            this.target.html(v).text(v).val(v);
        },
        setValue: function (o,v) {
            var v = this.getFmtDate(v, 'u');
            tg.html(v).text(v).val(v);
        },
        setSeqByViewType: function () {
            var idx = this.ue_control_idx;
            switch (this.viewType) {
                case 's': {
                    this.split3.html('T');
                } break;
                case 't': {
                    this.yearDom.hide();
                    this.split1.hide();
                    this.monthDom.hide();
                    this.split2.hide();
                    this.dateDom.hide();
                    this.split3.hide();
                    this.split5.hide();
                    this.secondDom.hide();
                } break;
                case 'y': {
                    this.split2.hide();
                    this.dateDom.hide();
                    this.split3.hide();
                    this.hourDom.hide();
                    this.split4.hide();
                    this.minuteDom.hide();
                    this.split5.hide();
                    this.secondDom.hide();
                } break;
                case 'd': {
                    this.split3.hide();
                    this.hourDom.hide();
                    this.split4.hide();
                    this.minuteDom.hide();
                    this.split5.hide();
                    this.secondDom.hide();
                } break;
                case 'm': {
                    this.yearDom.hide();
                    this.split1.hide();
                    this.split3.hide();
                    this.hourDom.hide();
                    this.split4.hide();
                    this.minuteDom.hide();
                    this.split5.hide();
                    this.secondDom.hide();
                } break;
                case 'f': {
                } break;
                case 'g': {
                } break;
                case 'r': {
                } break;
                case 'u': {
                } break;
                case 'v': {
                    this.dateDom.insertBefore(this.yearDom);
                    this.yearDom.insertBefore(this.split3);
                    this.split1.html('/');
                    this.split2.html('/');
                } break;
                default: {
                } break;
            }

        },
        initView: function () {
            this.frameDom  = $('<div class="ue_date_frame" idx="' + this.idx + '" ></div>').appendTo($('body'));
            this.yearDom   = $('<input class="ue_date_content ue_date_year"   date_part="year"   idx="' + this.idx + '" />').appendTo(this.frameDom);
            this.split1    = $('<div class="ue_date_split" idx="' + this.idx + '">-</div>').appendTo(this.frameDom);
            this.monthDom  = $('<input class="ue_date_content ue_date_month"  date_part="month"  idx="' + this.idx + '" />').appendTo(this.frameDom);
            this.split2    = $('<div class="ue_date_split" idx="' + this.idx + '">-</div>').appendTo(this.frameDom);
            this.dateDom   = $('<input class="ue_date_content ue_date_day"    date_part="date"   idx="' + this.idx + '" />').appendTo(this.frameDom);
            this.split3    = $('<div class="ue_date_split" idx="' + this.idx + '"> </div>').appendTo(this.frameDom);
            this.hourDom   = $('<input class="ue_date_content ue_date_hour"   date_part="hour"   idx="' + this.idx + '" />').appendTo(this.frameDom);
            this.split4    = $('<div class="ue_date_split" idx="' + this.idx + '">:</div>').appendTo(this.frameDom);
            this.minuteDom = $('<input class="ue_date_content ue_date_minute" date_part="minute" idx="' + this.idx + '" />').appendTo(this.frameDom);
            this.split5    = $('<div class="ue_date_split" idx="' + this.idx + '">:</div>').appendTo(this.frameDom);
            this.secondDom = $('<input class="ue_date_content ue_date_second" date_part="second" idx="' + this.idx + '" />').appendTo(this.frameDom);
            this.yearDom.val(this.year);
            this.monthDom.val(this.toFixStr(this.month + 1));
            this.dateDom.val(this.toFixStr(this.date));
            this.hourDom.val(this.toFixStr(this.hour));
            this.minuteDom.val(this.toFixStr(this.minute));
            this.secondDom.val(this.toFixStr(this.second));
            this.setSeqByViewType();
            var p = this.target.GetRect();
            this.frameDom.css({ top: p.top + (this.config.height - 20) / 2, left: p.left }).show();
            this.frameDom.children().first().focus().css({ borderColor: '#69c' });
        },
        initValue: function (s, f) {
            var v = this.getDateFromText(s, f);
            this.value = v;
            this.year = this.calendarYear = v.getFullYear();
            this.month = this.calendarMonth = v.getMonth();
            this.date = v.getDate();
            this.hour = v.getHours();
            this.minute = v.getMinutes();
            this.second = v.getSeconds();
        },
        bind: function (tg, f) {
			if ($('#ue_date_Style').length < 1) {
		        $(this.config.style).appendTo('head');
			}
			var id = UE_CONTROL_IDX++;
            tg.attr('idx', id).attr('tabindex', id).addClass('ue_date_target').attr('dateFormat', f || this.config.viewType)
            .off('focus').on('focus', function () {
                var idx = $(this).attr('idx');
                if (idx * 1 != UEDate.idx) {
                    var frm = $('.ue_date_frame[idx=' + UEDate.idx + ']');
                    if (frm.length > 0) {
                        UEDate.setTargetValue();
                        frm.remove();
                    }
                }
                UEDate.show(this);
            });
		},
		show: function (tg) {
		    var c = this.config;
		    this.target = t = $(tg);
		    this.idx = t.attr('tabindex') * 1;
		    this.viewType = t.attr('dateFormat') || this.config.viewType;
		    c.width = c.width || tg.width();
		    c.height = c.height || tg.height();
		    this.initValue(t.val() || t.html(), this.viewType);
		    this.initView();
		    this.bindEvent();
		    this.showCalendar();
		},
	});

    $.fn.bindUEDate = function (f) {
        UEDate.bind($(this), f);
	};

}());
/* 调用示例
    <div id="testDate1" style="width:160px; height:30px; border:1px solid #ddd;  ">25/10/2016 15:24:36</div><br />
    <input id="testDate2" style="width:160px; height:30px; border:1px solid #ddd;" value="18/9/2016 15:24:36" />
    <script type="text/javascript">
        var dt1 = $('#testDate1').bindUEDate();
        var dt2 = $('#testDate2').bindUEDate();
    </script>
*/