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 }