<style>    form, p, span, div, ul, li, input, dl, dt, dd, h1, h2, h3, h4, h5, h6, fieldset{margin:0;padding:0;color:#333;font-size:12px;}    input{outline:none;height:30px;line-height:30px;}    .timefield{display:inline-block;width: auto;margin-left: 0;}    .dot{border:0;background:transparent;width:6px;}    .Y,.M,.D,.HH,.MM,.SS{border:0;background:transparent;width:18px;padding:0 2px;text-align:center;}    .Y{width:30px;}    .timer{display:block;width:auto;border:1px solid #ccc;margin:0px 5px 0 0;line-height:22px;padding:0 10px;}</style><p>    <span>时间:</span>    <input type="text" name="time1" class="timefield" value="2014-09-04 00:05:00"><br><br>    <span>时间:</span>    <input type="text" name="time2" class="timefield" value="09-04 00:06:00"></span><br><br>    <span>时间:</span>    <input type="text" name="time3" class="timefield" value="09/04 00:06:00"></span><br><br>    <span>时间:</span>    <input type="text" name="time4" class="timefield" value="00:06:00"></span><br></p>

  1 /*  2 timefield version 1.0  3 Copyright 2014  4 Dual licensed under the MIT or GPL Version 2 licenses.  5 author "冷月(kentpan)"  6 http://code.google.com/p/kentpan/  7 http://www.cnblogs.com/kentpan/  8 */  9 (function (global, factory) { 10   if (typeof exports === "object" && exports) { 11     factory(exports); // CommonJS 12   } else if (typeof define === "function" && define.amd) { 13     define([‘exports‘], factory); // AMD 14   } else { 15     factory(global.MKT = {}); // <script> 16   } 17 }(this, function (exports) { 18  19     var TimeFields = function(root){ 20         this.data =http://www.mamicode.com/ { 21             expr: /(\-|\:|\s|\/|年|月|日|时|分|秒)/ig, 22             timer: { 23                 Y: 9999, 24                 M: 12, 25                 D: function(year,month){ 26                     var count=0 27                     switch(parseInt(month)){ 28                         case 1: 29                         case 3: 30                         case 5: 31                         case 7: 32                         case 8: 33                         case 10: 34                         case 12: 35                             count=31; 36                             break; 37                         case 4: 38                         case 6: 39                         case 9: 40                         case 11: 41                             count=30; 42                             break; 43                         case 2: 44                             count= (year%4==0) ? 29 : 28; 45                             ((year%100==0)&(year%400!=0)) && (count=28); 46                             break; 47                     } 48                     return count; 49                 }, 50                 HH: 23, 51                 MM: 59, 52                 SS: 59 53             } 54         }; 55         this.setTimer(root); 56     }; 57     TimeFields.prototype = { 58         setRealTimer: function(oTimer,oInput){ 59             var oEl   = oTimer.find(‘input‘); 60             var _this = this; 61             var val   = ‘‘; 62             var _time = []; 63             $.each(oEl,function(){ 64                 var me = $(this); 65                 if(me.is(‘.timeitems‘)){ 66                     var max = _this.data.timer[this.className.replace(/(\s+)?timeitems(\s+)?/i,‘‘)]; 67                     if(typeof max === ‘function‘){ 68                         max = max(oEl.filter(‘.Y‘).val(),oEl.filter(‘.M‘).val()); 69                     } 70                     if(!!max){ 71                         var min = me.is(‘.Y,.M,.D‘) ? 1 : 0; 72                         val = _this.parseTimer(this.value,max,min); 73                         $(this).val(val); 74                     } 75                 }else{ 76                     val = this.value; 77                 } 78                 !!val && _time.push(val); 79             }); 80             _time.length && oInput.prop(‘value‘,_time.join(‘‘)); 81         }, 82         parseTimer: function(val,max,min){ 83             var _min = typeof min !== ‘undefined‘ ? min : 0; 84             if(val < 10){ 85                 val = (val - 0 < _min) ? max : ‘0‘ + parseInt(val); 86             }else if(val > max){ 87                 val = ‘0‘ + min; 88             } 89             return val; 90         }, 91         TimerChange: function(oEl,key,max){ 92             (this.data.delayTimer && !!this.data.delayTimer) && clearTimeout(this.data.delayTimer); 93             var val  = oEl.val() - 0; 94             val = key == 38 ? ++val : --val; 95             var min = oEl.is(‘.Y,.M,.D‘) ? 1 : 0; 96             val = this.parseTimer(val,max,min); 97             oEl.val(val); 98             this.data.delayTimer = setTimeout(function(){ 99                 TimeFields.TimerChange(oEl,key,max);100             },300);101         },102         TimerKeyup: function(oTimer,oInput){103             (!!this.data.delayTimer) && clearTimeout(this.data.delayTimer);104         },105         TimerKeydown: function(oEl,key){106             switch(key){107                 case 37: //左108                     var oPrev  = oEl.prevAll(‘:not([readonly])‘);109                     oPrev.length && oPrev[0].focus();110                     break;111                 case 39: //右112                     var oNext  = oEl.nextAll(‘:not([readonly])‘);113                     oNext.length && oNext[0].focus();114                     break;115                 case 38: //上116                 case 40: //下117                     var max = this.data.timer[oEl.attr(‘class‘).replace(/(\s+)?timeitems(\s+)?/i,‘‘)];118                     if(typeof max === ‘function‘){119                         max = max(oEl.siblings(‘.Y‘).val(),oEl.siblings(‘.M‘).val());120                     }121                     this.TimerChange(oEl,key,max);122                     break;123             }124         },125         checkTimer: function(oEl,oTimer,oInput){126             var val  = $.trim(oEl.val());127             var name = oEl.attr(‘class‘);128             if(val < 10 && val.length < 2){129                 val = ‘0‘ + val;130             }else if(val > this.data.timer[name]){131                 val = this.data.timer[name];132             }133             oEl.val(val);134         },135         transferDate: function(data){136             var expr  = this.data.expr;137             var time  = data.replace(expr,‘@$1@‘);138             var times = time.split(‘@‘);139             var pattern = [‘SS‘,‘MM‘,‘HH‘,‘D‘,‘M‘,‘Y‘];140             data =http://www.mamicode.com/ {};141             var j = 0;142             for(var i=times.length - 1;i>=0;i--){143                 var key = pattern[j];144                 if(expr.test(times[i])){145                     key = ‘dot‘;146                 }else{147                     j++;148                 }149                 data[i] = {key:key,val:times[i]};150             }151             return data;152         },153         createTPL: function(data){154             var _this = this;155             var tpl   = [];156             tpl.push(‘<span class="timer">‘);157             $.each(data,function(i,v){158                 var key = v.key;159                 var val = v.val;160                 if(_this.data.expr.test(val)){161                     tpl.push(‘<input type="text" class="‘+key+‘" readOnly=true  value="http://www.mamicode.com/‘+val+‘" tabIndex="-1"/>‘);162                 }else{163                     tpl.push(‘<input type="text" maxlength="‘+val.length+‘" class="timeitems ‘+key+‘" value="http://www.mamicode.com/‘+val+‘" autocomplete="off"/>‘);164                 }165             });166             tpl.push(‘</span>‘);167             return tpl.join(‘‘);168         },169         createTimerField: function(oTimer,option){170             var val   = $.trim(oTimer.val());171             var _this = this;172             var data = http://www.mamicode.com/this.transferDate(val);173             var tpl = $(this.createTPL(data));174             var event    = ‘keydown keyup focus blur‘;175             var selector = ‘.timeitems‘;176             tpl.off(event,selector).on(event,selector,function(e){177                 var me   = $(this);178                 var type = e.type;179                 (!!_this.data.delayTimer) && clearTimeout(_this.data.delayTimer);180                 switch(type){181                     case ‘keydown‘:182                         var key = e.keyCode || e.witch;183                         _this.TimerKeydown(me,key);184                         break;185                     case ‘keyup‘:186                         _this.TimerKeyup();187                         break;188                     case ‘focus‘:189                     case ‘focusin‘:190                         me.css(‘background‘,‘#7FFFD4‘);191                         _this.data.delayTimer = setTimeout(function(){192                             me[0].select();193                         },200);194                         break;195                     case ‘blur‘:196                     case ‘focusout‘:197                         me.css(‘background‘,‘‘);198                         _this.setRealTimer(me.parent(‘.timer‘),oTimer);199                         break;200                 }201             });202             if(oTimer.is(‘[type="text"]‘)){203                 var Time = oTimer.clone(true);204                 Time.attr(‘type‘,‘hidden‘);205                 var oField = $(‘<span class="timefield"></span>‘);206                 oField.append(Time).append(tpl);207                 oTimer.replaceWith(oField);208                 oTimer = Time;209             }else{210                 oTimer.after(tpl);211             }212         },213         setTimer: function(root,option){214             if(!root) return;215             root = $(root);216             if(!root.is(‘input‘)) return;217             var _this = this;218             root.each(function(){219                 var me  = $(this);220                 _this.createTimerField($(this),option);221             });222         }223     };224     return window.TimeFields = window.TimeFields || TimeFields;225 }));226 227 $(function(){228     new TimeFields(‘.timefield‘);229 });