1 | function datePicker(target) |
---|
2 | { |
---|
3 | if (!document.getElementById) { return; } |
---|
4 | |
---|
5 | if (!target || target.nodeName.toLowerCase() != 'input') { |
---|
6 | return; |
---|
7 | } |
---|
8 | |
---|
9 | this.target = target; |
---|
10 | this.oTable = document.createElement('table'); |
---|
11 | this.oBody = document.createElement('tbody'); |
---|
12 | this.oDates = new Array(); |
---|
13 | this.oMonth = document.createElement('span'); |
---|
14 | this.oYear = document.createElement('span'); |
---|
15 | this.oHour = document.createElement('input'); |
---|
16 | this.oMinute = document.createElement('input'); |
---|
17 | this.oTable.id = 'dc_datepicker_'+target.id; |
---|
18 | this.oTable.className = 'date-picker'; |
---|
19 | |
---|
20 | var cur = 1; |
---|
21 | var oRow, oHeading, oSpan; |
---|
22 | |
---|
23 | // Set title |
---|
24 | oRow = document.createElement('tr'); |
---|
25 | |
---|
26 | // Month block |
---|
27 | oHeading = document.createElement('th'); |
---|
28 | oHeading.colSpan = 4; |
---|
29 | oHeading.className = 'date-picker-month'; |
---|
30 | |
---|
31 | var nav = document.createElement('span'); |
---|
32 | nav.appendChild(document.createTextNode(String.fromCharCode(171))); |
---|
33 | nav.fn = this.changeMonth; |
---|
34 | nav.obj = this; |
---|
35 | nav.onclick = function() { this.fn.call(this.obj,-1); }; |
---|
36 | nav.className = 'date-picker-control'; |
---|
37 | oHeading.appendChild(nav); |
---|
38 | |
---|
39 | oHeading.appendChild(document.createTextNode(String.fromCharCode(160))); |
---|
40 | |
---|
41 | nav = document.createElement('span'); |
---|
42 | nav.appendChild(document.createTextNode(String.fromCharCode(187))); |
---|
43 | nav.fn = this.changeMonth; |
---|
44 | nav.obj = this; |
---|
45 | nav.onclick = function() { this.fn.call(this.obj,+1); }; |
---|
46 | nav.className = 'date-picker-control'; |
---|
47 | oHeading.appendChild(nav); |
---|
48 | |
---|
49 | oHeading.appendChild(document.createTextNode(String.fromCharCode(160))); |
---|
50 | |
---|
51 | oHeading.appendChild(this.oMonth); |
---|
52 | |
---|
53 | oRow.appendChild(oHeading); |
---|
54 | |
---|
55 | // Year block |
---|
56 | oHeading = document.createElement('th'); |
---|
57 | oHeading.colSpan = 3; |
---|
58 | oHeading.className = 'date-picker-year'; |
---|
59 | |
---|
60 | oHeading.appendChild(this.oYear); |
---|
61 | |
---|
62 | oHeading.appendChild(document.createTextNode(String.fromCharCode(160))); |
---|
63 | |
---|
64 | nav = document.createElement('span'); |
---|
65 | nav.appendChild(document.createTextNode(String.fromCharCode(171))); |
---|
66 | nav.fn = this.changeYear; |
---|
67 | nav.obj = this; |
---|
68 | nav.onclick = function() { this.fn.call(this.obj,-1); }; |
---|
69 | nav.className = 'date-picker-control'; |
---|
70 | oHeading.appendChild(nav); |
---|
71 | |
---|
72 | oHeading.appendChild(document.createTextNode(String.fromCharCode(160))); |
---|
73 | |
---|
74 | nav = document.createElement('span'); |
---|
75 | nav.appendChild(document.createTextNode(String.fromCharCode(187))); |
---|
76 | nav.fn = this.changeYear; |
---|
77 | nav.obj = this; |
---|
78 | nav.onclick = function() { this.fn.call(this.obj,+1); }; |
---|
79 | nav.className = 'date-picker-control'; |
---|
80 | oHeading.appendChild(nav); |
---|
81 | |
---|
82 | oRow.appendChild(oHeading); |
---|
83 | |
---|
84 | this.oBody.appendChild(oRow); |
---|
85 | |
---|
86 | // Create legend |
---|
87 | oRow = document.createElement('tr'); |
---|
88 | var cday; |
---|
89 | for (i=0; i<this.days.length; i++) { |
---|
90 | cday = this.days[i].substring(0,1).toUpperCase(); |
---|
91 | oHeading = document.createElement('th'); |
---|
92 | oHeading.appendChild(document.createTextNode(cday)); |
---|
93 | oHeading.setAttribute('title',this.days[i]); |
---|
94 | oRow.appendChild(oHeading); |
---|
95 | } |
---|
96 | this.oBody.appendChild(oRow); |
---|
97 | |
---|
98 | // Create 6 rows of 7 cols for days |
---|
99 | for (var i=0; i<6; i++) { |
---|
100 | oRow = document.createElement('tr'); |
---|
101 | |
---|
102 | for (var j=0; j<7; j++) { |
---|
103 | this.oDates[cur] = document.createElement('td'); |
---|
104 | this.oDates[cur].appendChild(document.createTextNode( |
---|
105 | String.fromCharCode(160))); |
---|
106 | oRow.appendChild(this.oDates[cur]); |
---|
107 | cur++; |
---|
108 | } |
---|
109 | |
---|
110 | this.oBody.appendChild(oRow); |
---|
111 | } |
---|
112 | |
---|
113 | // Time controls |
---|
114 | oRow = document.createElement('tr'); |
---|
115 | |
---|
116 | oHeading = document.createElement('th'); |
---|
117 | oHeading.className = 'date-picker-control'; |
---|
118 | oHeading.appendChild(document.createTextNode('!')); |
---|
119 | oHeading.setAttribute('title',this.now_msg); |
---|
120 | oHeading.fn = this.sendNow; |
---|
121 | oHeading.obj = this; |
---|
122 | oHeading.onclick = function() { this.fn.call(this.obj); }; |
---|
123 | |
---|
124 | oRow.appendChild(oHeading); |
---|
125 | |
---|
126 | oHeading = document.createElement('th'); |
---|
127 | oHeading.colSpan = 5; |
---|
128 | |
---|
129 | oSpan = document.createElement('span'); |
---|
130 | oSpan.className = 'date-picker-control'; |
---|
131 | oSpan.appendChild(document.createTextNode('-')); |
---|
132 | oSpan.fn = this.changeHour; |
---|
133 | oSpan.obj = this; |
---|
134 | oSpan.onclick = function() { this.fn.call(this.obj,-1); }; |
---|
135 | oHeading.appendChild(oSpan); |
---|
136 | oHeading.appendChild(document.createTextNode(String.fromCharCode(160))); |
---|
137 | oSpan = document.createElement('span'); |
---|
138 | oSpan.className = 'date-picker-control'; |
---|
139 | oSpan.appendChild(document.createTextNode('+')); |
---|
140 | oSpan.fn = this.changeHour; |
---|
141 | oSpan.obj = this; |
---|
142 | oSpan.onclick = function() { this.fn.call(this.obj,+1); }; |
---|
143 | oHeading.appendChild(oSpan); |
---|
144 | oHeading.appendChild(document.createTextNode(String.fromCharCode(160))); |
---|
145 | |
---|
146 | this.oHour.size = 3; |
---|
147 | oHeading.appendChild(this.oHour); |
---|
148 | |
---|
149 | oHeading.appendChild(document.createTextNode(' : ')); |
---|
150 | |
---|
151 | this.oMinute.size = 3; |
---|
152 | oHeading.appendChild(this.oMinute); |
---|
153 | |
---|
154 | oHeading.appendChild(document.createTextNode(String.fromCharCode(160))); |
---|
155 | oSpan = document.createElement('span'); |
---|
156 | oSpan.className = 'date-picker-control'; |
---|
157 | oSpan.appendChild(document.createTextNode('-')); |
---|
158 | oSpan.fn = this.changeMinute; |
---|
159 | oSpan.obj = this; |
---|
160 | oSpan.onclick = function() { this.fn.call(this.obj,-1); }; |
---|
161 | oHeading.appendChild(oSpan); |
---|
162 | oHeading.appendChild(document.createTextNode(String.fromCharCode(160))); |
---|
163 | oSpan = document.createElement('span'); |
---|
164 | oSpan.className = 'date-picker-control'; |
---|
165 | oSpan.appendChild(document.createTextNode('+')); |
---|
166 | oSpan.fn = this.changeMinute; |
---|
167 | oSpan.obj = this; |
---|
168 | oSpan.onclick = function() { this.fn.call(this.obj,+1); }; |
---|
169 | |
---|
170 | oHeading.appendChild(oSpan); |
---|
171 | |
---|
172 | oRow.appendChild(oHeading); |
---|
173 | |
---|
174 | // Close control |
---|
175 | oHeading = document.createElement('th'); |
---|
176 | oHeading.className = 'date-picker-control'; |
---|
177 | oHeading.appendChild(document.createTextNode('x')); |
---|
178 | oHeading.setAttribute('title',this.close_msg); |
---|
179 | oHeading.fn = this.close; |
---|
180 | oHeading.obj = this; |
---|
181 | oHeading.onclick = function() { this.fn.call(this.obj); }; |
---|
182 | |
---|
183 | oRow.appendChild(oHeading); |
---|
184 | |
---|
185 | this.oBody.appendChild(oRow); |
---|
186 | }; |
---|
187 | |
---|
188 | datePicker.prototype = { |
---|
189 | year: 0, |
---|
190 | month: 0, |
---|
191 | day: 0, |
---|
192 | hour: 0, |
---|
193 | minute: 0, |
---|
194 | |
---|
195 | img_src: '', |
---|
196 | img_top: '0.2em', |
---|
197 | now_msg: 'now', |
---|
198 | close_msg: 'close', |
---|
199 | |
---|
200 | days: new Array('Monday','Tuesday','Wednesday','Thursday','Friday', |
---|
201 | 'Saturday','Sunday'), |
---|
202 | |
---|
203 | months: new Array('January','February','March','April','May','June', |
---|
204 | 'July','August','September','October','November','December'), |
---|
205 | |
---|
206 | |
---|
207 | setDate: function() { |
---|
208 | if (this.numberOfDays() < this.day) { |
---|
209 | this.day = this.numberOfDays(); |
---|
210 | } |
---|
211 | |
---|
212 | while (this.oYear.hasChildNodes()) { |
---|
213 | this.oYear.removeChild(this.oYear.firstChild) |
---|
214 | } |
---|
215 | this.oYear.appendChild(document.createTextNode(this.year)); |
---|
216 | |
---|
217 | while (this.oMonth.hasChildNodes()) { |
---|
218 | this.oMonth.removeChild(this.oMonth.firstChild) |
---|
219 | } |
---|
220 | this.oMonth.appendChild(document.createTextNode( |
---|
221 | this.months[this.month-1])); |
---|
222 | |
---|
223 | var firstDay = this.firstDay(); |
---|
224 | var nbDays = this.numberOfDays(); |
---|
225 | |
---|
226 | // Empty days |
---|
227 | for (var i=1; i<=42; i++) { |
---|
228 | while (this.oDates[i].hasChildNodes()) { |
---|
229 | this.oDates[i].removeChild(this.oDates[i].firstChild) |
---|
230 | } |
---|
231 | this.oDates[i].appendChild(document.createTextNode('-')); |
---|
232 | this.oDates[i].className = ''; |
---|
233 | this.oDates[i].onclick = function() { return; }; |
---|
234 | } |
---|
235 | |
---|
236 | // Insert days from the first day to the last |
---|
237 | for (i=1; i<=nbDays; i++) { |
---|
238 | var j=firstDay+i-1; |
---|
239 | |
---|
240 | while (this.oDates[j].hasChildNodes()) { |
---|
241 | this.oDates[j].removeChild(this.oDates[j].firstChild) |
---|
242 | } |
---|
243 | |
---|
244 | this.oDates[j].appendChild(document.createTextNode(i)); |
---|
245 | this.oDates[j].index = i; |
---|
246 | this.oDates[j].fn = this.sendDate; |
---|
247 | this.oDates[j].obj = this; |
---|
248 | this.oDates[j].onclick = function() { this.fn.call(this.obj,this.index); }; |
---|
249 | if (i == this.day) { |
---|
250 | this.oDates[j].className = 'date-picker-today'; |
---|
251 | } else { |
---|
252 | this.oDates[j].className = 'date-picker-day'; |
---|
253 | } |
---|
254 | } |
---|
255 | |
---|
256 | // Set time |
---|
257 | this.setHour(this.hour); |
---|
258 | this.setMinute(this.minute); |
---|
259 | }, |
---|
260 | |
---|
261 | setHour: function(h) { |
---|
262 | if (h < 0) { h = 23; } |
---|
263 | if (h > 23) { h = 0; } |
---|
264 | if (h < 10) { h = '0'+h; } |
---|
265 | |
---|
266 | this.hour = h*1; |
---|
267 | this.oHour.value = h; |
---|
268 | }, |
---|
269 | |
---|
270 | setMinute: function(m) { |
---|
271 | if (m < 0) { m = 59; } |
---|
272 | if (m > 59) { m = 0; } |
---|
273 | if (m < 10) { m = '0'+m; } |
---|
274 | |
---|
275 | this.minute = m*1; |
---|
276 | this.oMinute.value = m; |
---|
277 | }, |
---|
278 | |
---|
279 | changeMonth: function(dir) { |
---|
280 | var y = this.year; |
---|
281 | var m = this.month; |
---|
282 | m = m+dir; |
---|
283 | |
---|
284 | if (m > 12) { this.month = 1; this.year++; } |
---|
285 | else if ( m < 1) { this.month = 12; this.year--; } |
---|
286 | else { this.month = m; } |
---|
287 | |
---|
288 | this.setDate(); |
---|
289 | }, |
---|
290 | |
---|
291 | changeYear: function(dir) { |
---|
292 | this.year = this.year + dir; |
---|
293 | this.setDate(); |
---|
294 | }, |
---|
295 | |
---|
296 | changeHour: function(dir) { |
---|
297 | this.setHour(this.hour*1+dir); |
---|
298 | }, |
---|
299 | |
---|
300 | changeMinute: function(dir) { |
---|
301 | this.setMinute(this.minute*1+dir); |
---|
302 | }, |
---|
303 | |
---|
304 | sendDate: function(d) { |
---|
305 | var m = this.month; |
---|
306 | var hour = this.oHour.value*1; |
---|
307 | var minute = this.oMinute.value*1; |
---|
308 | |
---|
309 | if (hour < 0 || hour > 23 || isNaN(hour)) { hour = 0; } |
---|
310 | if (minute < 0 || minute > 59 || isNaN(minute)) { minute = 0; } |
---|
311 | |
---|
312 | if (m < 10) { m = '0'+m; } |
---|
313 | if (d < 10) { d = '0'+d; } |
---|
314 | if (hour < 10) { hour = '0'+hour; } |
---|
315 | if (minute < 10) { minute = '0'+minute; } |
---|
316 | |
---|
317 | this.target.value = this.year+'-'+m+'-'+d+' '+hour+':'+minute; |
---|
318 | this.close(); |
---|
319 | }, |
---|
320 | |
---|
321 | sendNow: function() { |
---|
322 | var dt = new Date(); |
---|
323 | var y = dt.getFullYear(); |
---|
324 | var m = dt.getMonth() + 1; |
---|
325 | var d = dt.getDate(); |
---|
326 | var h = dt.getHours(); |
---|
327 | var i = dt.getMinutes(); |
---|
328 | |
---|
329 | if (m < 10) { m = '0'+m; } |
---|
330 | if (d < 10) { d = '0'+d; } |
---|
331 | if (h < 10) { h = '0'+h; } |
---|
332 | if (i < 10) { i = '0'+i; } |
---|
333 | |
---|
334 | this.target.value = y+'-'+m+'-'+d+' '+h+':'+i; |
---|
335 | this.close(); |
---|
336 | }, |
---|
337 | |
---|
338 | close: function() { |
---|
339 | document.body.removeChild(this.oTable); |
---|
340 | }, |
---|
341 | |
---|
342 | numberOfDays: function() { |
---|
343 | var res = 31; |
---|
344 | if (this.month == 4 || this.month == 6 || this.month == 9 || |
---|
345 | this.month == 11) { |
---|
346 | res = 30; |
---|
347 | } else if (this.month == 2) { |
---|
348 | res = 28; |
---|
349 | if (this.year%4 == 0 && (this.year%100 != 0 || |
---|
350 | this.year%400 == 0)) { |
---|
351 | res = 29; |
---|
352 | } |
---|
353 | } |
---|
354 | |
---|
355 | return res; |
---|
356 | }, |
---|
357 | |
---|
358 | firstDay: function() { |
---|
359 | var dt = new Date(this.year,this.month-1,1); |
---|
360 | var res = dt.getDay(); |
---|
361 | |
---|
362 | if (res == 0) { |
---|
363 | res = 7; |
---|
364 | } |
---|
365 | |
---|
366 | return res; |
---|
367 | }, |
---|
368 | |
---|
369 | show: function() { |
---|
370 | // Parsing target value |
---|
371 | var re = /(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2})/; |
---|
372 | var match = re.exec(this.target.value); |
---|
373 | if (match) { |
---|
374 | this.year = match[1]*1; |
---|
375 | this.month = match[2]*1; |
---|
376 | this.day = match[3]*1; |
---|
377 | this.hour = match[4]*1; |
---|
378 | this.minute = match[5]*1; |
---|
379 | } else { |
---|
380 | var dt = new Date(); |
---|
381 | this.year = dt.getFullYear(); |
---|
382 | this.month = dt.getMonth() + 1; |
---|
383 | this.day = dt.getDate(); |
---|
384 | this.hour = dt.getHours(); |
---|
385 | this.minute = dt.getMinutes(); |
---|
386 | } |
---|
387 | |
---|
388 | this.oTable.appendChild(this.oBody); |
---|
389 | this.setDate(); |
---|
390 | this.setPosition(); |
---|
391 | document.body.appendChild(this.oTable); |
---|
392 | this.oHour.focus(); |
---|
393 | }, |
---|
394 | |
---|
395 | setPosition: function() { |
---|
396 | var t_x = this.findPosX(this.target); |
---|
397 | var t_y = this.findPosY(this.target); |
---|
398 | var o_h = this.oTable.offsetHeight; |
---|
399 | var o_w = this.oTable.offsetWidth; |
---|
400 | |
---|
401 | this.oTable.style.position = 'absolute'; |
---|
402 | this.oTable.style.zIndex = '100'; |
---|
403 | this.oTable.style.top = t_y+'px'; |
---|
404 | this.oTable.style.left = t_x+'px'; |
---|
405 | }, |
---|
406 | |
---|
407 | findPosX: function(obj) { |
---|
408 | var curleft = 0; |
---|
409 | if(obj.offsetParent) { |
---|
410 | while(1) { |
---|
411 | curleft += obj.offsetLeft; |
---|
412 | if(!obj.offsetParent) { |
---|
413 | break; |
---|
414 | } |
---|
415 | obj = obj.offsetParent; |
---|
416 | } |
---|
417 | } else if(obj.x) { |
---|
418 | curleft += obj.x; |
---|
419 | } |
---|
420 | return curleft; |
---|
421 | }, |
---|
422 | |
---|
423 | findPosY: function(obj) { |
---|
424 | var curtop = 0; |
---|
425 | if(obj.offsetParent) { |
---|
426 | while(1) { |
---|
427 | curtop += obj.offsetTop; |
---|
428 | if(!obj.offsetParent) { |
---|
429 | break; |
---|
430 | } |
---|
431 | obj = obj.offsetParent; |
---|
432 | } |
---|
433 | } else if(obj.y) { |
---|
434 | curtop += obj.y; |
---|
435 | } |
---|
436 | return curtop; |
---|
437 | }, |
---|
438 | |
---|
439 | draw: function() { |
---|
440 | var imgE = document.createElement('img'); |
---|
441 | imgE.src = this.img_src; |
---|
442 | imgE.style.position = 'absolute'; |
---|
443 | imgE.style.top = this.img_top; |
---|
444 | imgE.style.left = (this.target.clientWidth+4)+'px'; |
---|
445 | imgE.obj = this; |
---|
446 | imgE.fn = this.show; |
---|
447 | imgE.onclick = function() { this.fn.apply(this.obj); }; |
---|
448 | |
---|
449 | this.target.parentNode.style.position = 'relative'; |
---|
450 | this.target.parentNode.insertBefore(imgE,this.target.nextSibling); |
---|
451 | } |
---|
452 | }; |
---|