最近在项目中屡次遇到时分秒格式的时间输入需求, 还老被吐槽说这个时间输入贼蛋疼,一不小心就输错,而且花费的时间不少.为了堵住悠悠用户之口,也为了今后有需求能直接拿来使用~~so整了这个简易的小控件.支持根据默认时间格式自动生成对应格式控件,支持键盘上下按键调整时间(长按连续调整), 支持键盘左右按键切换时间输入位置,当然...时间控件的位置完全可以自行定义
HTML和CSS狠简单:
<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>
JS其实更简单:
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,‘@[email protected]‘);
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 });
因为时间关系,没来得兼容AMD规范~~~有空了再整改吧.以上
===================== PS: 趁着还没下班~~赶紧加上AMD规范支持~~~~ ^_^ ==============================
时间： 2024-08-26 06:47:42