Dotclear

source: admin/js/date-picker.js @ 0:54703be25dd6

Revision 0:54703be25dd6, 11.4 KB checked in by Dsls <dsls@…>, 13 years ago (diff)

2.3 branch (trunk) first checkin
Line 
1function 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
188datePicker.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};
Note: See TracBrowser for help on using the repository browser.

Sites map