基于jqeury/zepto的年/月/日 时:分:秒 时间快捷控件(支持键盘操作)

<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 = {
 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 = {};
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="‘+val+‘" tabIndex="-1"/>‘);
162                 }else{
163                     tpl.push(‘<input type="text" maxlength="‘+val.length+‘" class="timeitems ‘+key+‘" value="‘+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 = 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 });