Ongoing refactoring of Checkbox class.
[timetracker.git] / WEB-INF / lib / form / DateField.class.php
1 <?php
2 // +----------------------------------------------------------------------+
3 // | Anuko Time Tracker
4 // +----------------------------------------------------------------------+
5 // | Copyright (c) Anuko International Ltd. (https://www.anuko.com)
6 // +----------------------------------------------------------------------+
7 // | LIBERAL FREEWARE LICENSE: This source code document may be used
8 // | by anyone for any purpose, and freely redistributed alone or in
9 // | combination with other software, provided that the license is obeyed.
10 // |
11 // | There are only two ways to violate the license:
12 // |
13 // | 1. To redistribute this code in source form, with the copyright
14 // |    notice or license removed or altered. (Distributing in compiled
15 // |    forms without embedded copyright notices is permitted).
16 // |
17 // | 2. To redistribute modified versions of this code in *any* form
18 // |    that bears insufficient indications that the modifications are
19 // |    not the work of the original author(s).
20 // |
21 // | This license applies to this document only, not any other software
22 // | that it may be combined with.
23 // |
24 // +----------------------------------------------------------------------+
25 // | Contributors:
26 // | https://www.anuko.com/time_tracker/credits.htm
27 // +----------------------------------------------------------------------+
28
29 import('form.TextField');
30 import('DateAndTime');
31
32 class DateField extends TextField {
33   var $mWeekStartDay = 0;
34   var $mDateFormat  = "d/m/Y";
35   var $lToday      = "Today";
36   var $mDateObj;
37
38   var $lCalendarButtons = array('today'=>'Today', 'close'=>'Close');
39
40   function __construct($name) {
41     $this->class = 'DateField';
42     $this->name = $name;
43     $this->mDateObj = new DateAndTime();
44
45     if (isset($GLOBALS["I18N"])) {
46       $this->localize($GLOBALS["I18N"]);
47     }
48   }
49
50   function localize($i18n)  {
51     global $user;
52         
53     $this->mDateObj->setFormat($user->date_format);
54
55     $this->mMonthNames = $i18n->monthNames;
56     $this->mWeekDayShortNames = $i18n->weekdayShortNames;
57     $this->lToday = $i18n->getKey('label.today');
58     $this->lCalendarButtons['today'] = $i18n->getKey('label.today');
59     $this->lCalendarButtons['close'] = $i18n->getKey('button.close');
60
61     $this->mDateFormat = $user->date_format;
62     $this->mWeekStartDay = $user->week_start;
63   }
64
65   // set current value taken from session or database
66   function setValueSafe($value)  {
67     if (isset($value) && (strlen($value) > 0)) {
68       $this->mDateObj->parseVal($value, DB_DATEFORMAT);
69       $this->value = $this->mDateObj->toString($this->mDateFormat); //?
70     }
71   }
72   // get value for storing in session or database
73   function getValueSafe() {
74     if (strlen($this->value)>0) {
75       $this->mDateObj->parseVal($this->value, $this->mDateFormat);  //?
76       return $this->mDateObj->toString(DB_DATEFORMAT);
77     } else {
78       return null;
79     }
80   }
81
82   function getHtml() {
83
84     if (!$this->isEnabled()) {
85       $html = htmlspecialchars($this->getValue()).
86         "<input type=\"hidden\" name=\"$this->name\" value=\"".htmlspecialchars($this->getValue())."\">\n";
87     } else {
88
89         if ($this->id=="") $this->id = $this->name;
90
91       $html = "";
92
93       // http://www.nsftools.com/tips/JavaScriptTips.htm#datepicker
94
95       $html .= "<style>
96             .dpDiv {}
97             .dpTable {font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; color: #505050; background-color: #ece9d8; border: 1px solid #AAAAAA;}
98             .dpTR {}
99             .dpTitleTR {}
100             .dpDayTR {}
101             .dpTodayButtonTR {}
102             .dpTD {border: 1px solid #ece9d8;}
103             .dpDayHighlightTD {background-color: #CCCCCC;border: 1px solid #AAAAAA;}
104             .dpTDHover {background-color: #aca998;border: 1px solid #888888;cursor: pointer;color: red;}
105             .dpTitleTD {}
106             .dpButtonTD {}
107             .dpTodayButtonTD {}
108             .dpDayTD {background-color: #CCCCCC;border: 1px solid #AAAAAA;color: white;}
109             .dpTitleText {font-size: 12px;color: gray;font-weight: bold;}
110             .dpDayHighlight {color: 4060ff;font-weight: bold;}
111             .dpButton {font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;font-size: 10px;color: gray;background: #d8e8ff;font-weight: bold;padding: 0px;}
112             .dpTodayButton {font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;font-size: 10px;color: gray;  background: #d8e8ff;font-weight: bold;}
113             </style>\n";
114       $html .= "<script>
115             var datePickerDivID = \"datepicker\";
116             var iFrameDivID = \"datepickeriframe\";
117
118             var dayArrayShort = new Array('".join("','",$this->mWeekDayShortNames)."');
119             var dayArrayMed = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
120             var dayArrayLong = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
121             var monthArrayShort = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
122             var monthArrayMed = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec');
123             var monthArrayLong = new Array('".join("','",$this->mMonthNames)."');
124
125             var defaultDateSeparator = \"".$this->mDateFormat[1]."\";
126             var defaultDateFormat = \"".$this->mDateFormat."\";
127             var dateSeparator = defaultDateSeparator;
128             var dateFormat = defaultDateFormat;
129             var startWeek = ".$this->mWeekStartDay.";
130
131           ";
132       $html .= "
133
134             function getStartWeekDayNumber(date) {
135               var res = date.getDay() - startWeek;
136               if (res < 0) {
137                 res += 7;
138               }
139               return res;
140             }
141
142             function displayDatePicker(dateFieldName, displayBelowThisObject, dtFormat, dtSep) {
143               var targetDateField = document.getElementsByName(dateFieldName).item(0);
144
145               if (!displayBelowThisObject) displayBelowThisObject = targetDateField;
146               if (dtSep)
147                 dateSeparator = dtSep;
148               else
149                 dateSeparator = defaultDateSeparator;
150
151               if (dtFormat)
152                 dateFormat = dtFormat;
153               else
154                 dateFormat = defaultDateFormat;
155
156               var x = displayBelowThisObject.offsetLeft;
157               var y = displayBelowThisObject.offsetTop + displayBelowThisObject.offsetHeight ;
158
159               var parent = displayBelowThisObject;
160               while (parent.offsetParent) {
161                 parent = parent.offsetParent;
162                 x += parent.offsetLeft;
163                 y += parent.offsetTop ;
164               }
165
166               drawDatePicker(targetDateField, x, y);
167             }
168             function drawDatePicker(targetDateField, x, y) {
169               var dt = getFieldDate(targetDateField.value );
170
171               if (!document.getElementById(datePickerDivID)) {
172                 var newNode = document.createElement(\"div\");
173                 newNode.setAttribute(\"id\", datePickerDivID);
174                 newNode.setAttribute(\"class\", \"dpDiv\");
175                 newNode.setAttribute(\"style\", \"visibility: hidden;\");
176                 document.body.appendChild(newNode);
177               }
178
179               var pickerDiv = document.getElementById(datePickerDivID);
180               pickerDiv.style.position = \"absolute\";
181               pickerDiv.style.left = x + \"px\";
182               pickerDiv.style.top = (y + 3) + \"px\";
183               pickerDiv.style.visibility = (pickerDiv.style.visibility == \"visible\" ? \"hidden\" : \"visible\");
184               pickerDiv.style.display = (pickerDiv.style.display == \"block\" ? \"none\" : \"block\");
185               pickerDiv.style.zIndex = 10000;
186
187               refreshDatePicker(targetDateField.name, dt.getFullYear(), dt.getMonth(), dt.getDate());
188             }
189             function refreshDatePicker(dateFieldName, year, month, day) {
190               var thisDay = new Date();
191
192               if ((month >= 0) && (year > 0)) {
193                 thisDay = new Date(year, month, 1);
194               } else {
195                 day = thisDay.getDate();
196                 thisDay.setDate(1);
197               }
198
199               var crlf = \"\\r\\n\";
200               var TABLE = \"<table cols=7 class='dpTable'>\" + crlf;
201               var xTABLE = \"</table>\" + crlf;
202               var TR = \"<tr class='dpTR'>\";
203               var TR_title = \"<tr class='dpTitleTR' width='150' align='center'>\";
204               var TR_days = \"<tr class='dpDayTR'>\";
205               var TR_todaybutton = \"<tr class='dpTodayButtonTR'>\";
206               var xTR = \"</tr>\" + crlf;
207               var TD = \"<td class='dpTD' onMouseOut='this.className=\\\"dpTD\\\";' onMouseOver=' this.className=\\\"dpTDHover\\\";' \";
208               var TD_title = \"<td colspan=5 class='dpTitleTD'>\";
209               var TD_buttons = \"<td class='dpButtonTD' width='50'>\";
210               var TD_todaybutton = \"<td colspan=7 class='dpTodayButtonTD'>\";
211               var TD_days = \"<td class='dpDayTD'>\";
212               var TD_selected = \"<td class='dpDayHighlightTD' onMouseOut='this.className=\\\"dpDayHighlightTD\\\";' onMouseOver='this.className=\\\"dpTDHover\\\";' \";
213               var xTD = \"</td>\" + crlf;
214               var DIV_title = \"<div class='dpTitleText'>\";
215               var DIV_selected = \"<div class='dpDayHighlight'>\";
216               var xDIV = \"</div>\";
217
218               var html = TABLE;
219
220               html += TR_title + '<td colspan=7>';
221               html += '<table width=\"250\">'+ TR_title;
222               html += TD_buttons + getButtonCodeYear(dateFieldName, thisDay, -1, \"&lt;&lt;\") + getButtonCode(dateFieldName, thisDay, -1, \"&lt;\") + xTD;
223               html += TD_title + DIV_title + monthArrayLong[ thisDay.getMonth()] + \" \" + thisDay.getFullYear() + xDIV + xTD;
224               html += TD_buttons + getButtonCode(dateFieldName, thisDay, 1, \"&gt;\") + getButtonCodeYear(dateFieldName, thisDay, 1, \"&gt;&gt;\") + xTD;
225               html += xTR + '</table>' + xTD;
226               html += xTR;
227
228               html += TR_days;
229               for(i = 0; i < dayArrayShort.length; i++)
230                 html += TD_days + dayArrayShort[(i + startWeek) % 7] + xTD;
231               html += xTR;
232
233               html += TR;
234
235               //var startD = (thisDay.getDay()-startWeek<0?6:thisDay.getDay()-startWeek);
236               var startD = getStartWeekDayNumber(thisDay);
237               for (i = 0; i < startD; i++)
238                 html += TD + \"&nbsp;\" + xTD;
239
240               do {
241                 dayNum = thisDay.getDate();
242                 TD_onclick = \" onclick=\\\"updateDateField('\" + dateFieldName + \"', '\" + getDateString(thisDay) + \"');\\\">\";
243
244                 if (dayNum == day)
245                   html += TD_selected + TD_onclick + DIV_selected + dayNum + xDIV + xTD;
246                 else
247                   html += TD + TD_onclick + dayNum + xTD;
248
249                 var startD = getStartWeekDayNumber(thisDay);
250
251                 if (startD == 6)
252                   html += xTR + TR;
253
254                 thisDay.setDate(thisDay.getDate() + 1);
255               } while (thisDay.getDate() > 1)
256
257               var startD = getStartWeekDayNumber(thisDay);
258               if (startD > 0) {
259                 for (i = 6; i >= startD; i--) {
260                   html += TD + \"&nbsp;\" + xTD;
261                 }
262               }              
263               html += xTR;
264
265               var today = new Date();
266               var todayString = \"Today is \" + dayArrayMed[today.getDay()] + \", \" + monthArrayMed[ today.getMonth()] + \" \" + today.getDate();
267               html += TR_todaybutton + TD_todaybutton;
268               html += \"<button class='dpTodayButton' onClick=\\\"refreshDatePicker('\" + dateFieldName + \"'); updateDateFieldOnly('\" + dateFieldName + \"', '\" + getDateString(new Date()) + \"');\\\">".$this->lCalendarButtons['today']."</button> \";
269               html += \"<button class='dpTodayButton' onClick='updateDateField(\\\"\" + dateFieldName + \"\\\");'>".$this->lCalendarButtons['close']."</button>\";
270               html += xTD + xTR;
271
272               html += xTABLE;
273
274               document.getElementById(datePickerDivID).innerHTML = html;
275               adjustiFrame();
276             }
277
278
279             function getButtonCode(dateFieldName, dateVal, adjust, label) {
280               var newMonth = (dateVal.getMonth () + adjust) % 12;
281               var newYear = dateVal.getFullYear() + parseInt((dateVal.getMonth() + adjust) / 12);
282               if (newMonth < 0) {
283                 newMonth += 12;
284                 newYear += -1;
285               }
286
287               return \"<button class='dpButton' onClick='refreshDatePicker(\\\"\" + dateFieldName + \"\\\", \" + newYear + \", \" + newMonth + \");'>\" + label + \"</button>\";
288             }
289
290             function getButtonCodeYear(dateFieldName, dateVal, adjust, label) {
291               var newMonth = dateVal.getMonth();
292               var newYear = dateVal.getFullYear() + adjust;
293
294               return \"<button class='dpButton' onClick='refreshDatePicker(\\\"\" + dateFieldName + \"\\\", \" + newYear + \", \" + newMonth + \");'>\" + label + \"</button>\";
295             }
296
297
298             function getDateString(dateVal) {\n";
299             if (isset($GLOBALS['i18n'])) {
300               $html .= "dateVal.locale = \"".$GLOBALS['i18n']->lang."\";\n";
301             }
302             $html .=  "return dateVal.strftime(dateFormat);
303             }
304
305             function getFieldDate(dateString) {
306               try {
307                 var dateVal = strptime(dateString, dateFormat);
308               } catch(e) {
309                 dateVal = new Date();
310               }
311               if (dateVal == null) {
312                 dateVal = new Date();
313               }
314               return dateVal;
315             }
316
317             function splitDateString(dateString) {
318               var dArray;
319               if (dateString.indexOf(\"/\") >= 0)
320                 dArray = dateString.split(\"/\");
321               else if (dateString.indexOf(\".\") >= 0)
322                 dArray = dateString.split(\".\");
323               else if (dateString.indexOf(\"-\") >= 0)
324                 dArray = dateString.split(\"-\");
325               else if (dateString.indexOf(\"\\\\\") >= 0)
326                 dArray = dateString.split(\"\\\\\");
327               else
328                 dArray = false;
329
330               return dArray;
331             }
332
333             function updateDateField(dateFieldName, dateString)  {
334               var targetDateField = document.getElementsByName(dateFieldName).item(0);
335               if (dateString)
336                 targetDateField.value = dateString;
337
338               var pickerDiv = document.getElementById(datePickerDivID);
339               pickerDiv.style.visibility = \"hidden\";
340               pickerDiv.style.display = \"none\";
341
342               adjustiFrame();
343               targetDateField.focus();
344
345               if ((dateString) && (typeof(datePickerClosed) == \"function\"))
346                 datePickerClosed(targetDateField);
347             }
348
349             function updateDateFieldOnly(dateFieldName, dateString)  {
350               var targetDateField = document.getElementsByName(dateFieldName).item(0);
351               if (dateString)
352                 targetDateField.value = dateString;
353             }
354
355             function adjustiFrame(pickerDiv, iFrameDiv) {
356               var is_opera = (navigator.userAgent.toLowerCase().indexOf(\"opera\") != -1);
357               if (is_opera)
358                 return;
359
360               try {
361                 if (!document.getElementById(iFrameDivID)) {
362                   var newNode = document.createElement(\"iFrame\");
363                   newNode.setAttribute(\"id\", iFrameDivID);
364                   newNode.setAttribute(\"src\", \"javascript:false;\");
365                   newNode.setAttribute(\"scrolling\", \"no\");
366                   newNode.setAttribute (\"frameborder\", \"0\");
367                   document.body.appendChild(newNode);
368                 }
369
370                 if (!pickerDiv)
371                   pickerDiv = document.getElementById(datePickerDivID);
372                 if (!iFrameDiv)
373                   iFrameDiv = document.getElementById(iFrameDivID);
374
375                 try {
376                   iFrameDiv.style.position = \"absolute\";
377                   iFrameDiv.style.width = pickerDiv.offsetWidth;
378                   iFrameDiv.style.height = pickerDiv.offsetHeight ;
379                   iFrameDiv.style.top = pickerDiv.style.top;
380                   iFrameDiv.style.left = pickerDiv.style.left;
381                   iFrameDiv.style.zIndex = pickerDiv.style.zIndex - 1;
382                   iFrameDiv.style.visibility = pickerDiv.style.visibility ;
383                   iFrameDiv.style.display = pickerDiv.style.display;
384                 } catch(e) {
385                 }
386
387               } catch (ee) {
388               }
389             }\n";
390       $html .= "</script>\n";
391
392       $html .= "\n\t<input type=\"text\"";
393       $html .= " name=\"$this->name\" id=\"$this->id\"";
394
395       if ($this->size!="")
396         $html .= " size=\"$this->size\"";
397
398       if ($this->style!="")
399          $html .= " style=\"$this->style\"";
400
401         $html .= " maxlength=\"50\"";
402
403       if ($this->on_change!="")
404          $html .= " onchange=\"$this->on_change\"";
405
406       if ($this->on_click!="")
407          $html .= " onclick=\"$this->on_click\"";
408
409       $html .= " value=\"".htmlspecialchars($this->getValue())."\"";
410       $html .= ">";
411       
412       if (APP_NAME)
413         $app_root = '/'.APP_NAME;
414
415       $html .= "&nbsp;<img src=\"".$app_root."/images/calendar.gif\" width=\"16\" height=\"16\" onclick=\"displayDatePicker('".$this->name."');\">\n";
416     }
417
418     return $html;
419   }
420 }