[Sommaire] [Imprimer]

   1  Prado.WebUI.TDatePicker = Class.create();
   2  Object.extend(Prado.WebUI.TDatePicker,
   3  {
   4      /**
   5       * @return Date the date from drop down list options.
   6       */
   7      getDropDownDate : function(control)
   8      {
   9          var now=new Date();
  10          var year=now.getFullYear();
  11          var month=now.getMonth();
  12          var day=1;
  13  
  14          var month_list = this.getMonthListControl(control);
  15           var day_list = this.getDayListControl(control);
  16           var year_list = this.getYearListControl(control);
  17  
  18          var day = day_list ? $F(day_list) : 1;
  19          var month = month_list ? $F(month_list) : now.getMonth();
  20          var year = year_list ? $F(year_list) : now.getFullYear();
  21  
  22          return new Date(year,month,day, 0, 0, 0);
  23      },
  24  
  25      getYearListControl : function(control)
  26      {
  27          return $(control.id+"_year");
  28      },
  29  
  30      getMonthListControl : function(control)
  31      {
  32          return $(control.id+"_month");
  33      },
  34  
  35      getDayListControl : function(control)
  36      {
  37          return $(control.id+"_day");
  38      }
  39  });
  40  
  41  Prado.WebUI.TDatePicker.prototype =
  42  {
  43      MonthNames : [    "January",        "February",        "March",    "April",
  44          "May",            "June",            "July",        "August",
  45          "September",    "October",        "November",    "December"
  46      ],
  47      AbbreviatedMonthNames : ["Jan", "Feb", "Mar", "Apr", "May",
  48                          "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  49  
  50      ShortWeekDayNames : ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ],
  51  
  52      Format : "yyyy-MM-dd",
  53  
  54      FirstDayOfWeek : 1, // 0 for sunday
  55  
  56      ClassName : "",
  57  
  58      CalendarStyle : "default",
  59  
  60      FromYear : 2000, UpToYear: 2015,
  61  
  62      initialize : function(options)
  63      {
  64          this.options = options || [];
  65          this.control = $(options.ID);
  66          this.dateSlot = new Array(42);
  67          this.weekSlot = new Array(6);
  68          this.minimalDaysInFirstWeek    = 4;
  69          this.selectedDate = this.newDate();
  70  
  71          //which element to trigger to show the calendar
  72          if(this.options.Trigger)
  73          {
  74              this.trigger = $(this.options.Trigger) ;
  75              var triggerEvent = this.options.TriggerEvent || "click";
  76          }
  77          else
  78          {
  79              this.trigger  = this.control;
  80              var triggerEvent = this.options.TriggerEvent || "focus";
  81          }
  82  
  83          Object.extend(this,options);
  84  
  85          Event.observe(this.trigger, triggerEvent, this.show.bindEvent(this));
  86  
  87      },
  88  
  89      create : function()
  90      {
  91          if(typeof(this._calDiv) != "undefined")
  92              return;
  93  
  94          var div;
  95          var table;
  96          var tbody;
  97          var tr;
  98          var td;
  99  
 100          // Create the top-level div element
 101          this._calDiv = document.createElement("div");
 102          this._calDiv.className = "TDatePicker_"+this.CalendarStyle+" "+this.ClassName;
 103          this._calDiv.style.display = "none";
 104          this._calDiv.style.position = "absolute"
 105  
 106          // header div
 107          div = document.createElement("div");
 108          div.className = "calendarHeader";
 109          this._calDiv.appendChild(div);
 110  
 111          table = document.createElement("table");
 112          table.style.cellSpacing = 0;
 113          div.appendChild(table);
 114  
 115          tbody = document.createElement("tbody");
 116          table.appendChild(tbody);
 117  
 118          tr = document.createElement("tr");
 119          tbody.appendChild(tr);
 120  
 121          // Previous Month Button
 122          td = document.createElement("td");
 123          var previousMonth = document.createElement("input");
 124          previousMonth.className = "prevMonthButton button";
 125          previousMonth.type = "button"
 126          previousMonth.value = "<<";
 127          td.appendChild(previousMonth);
 128          tr.appendChild(td);
 129  
 130  
 131  
 132          //
 133          // Create the month drop down
 134          //
 135          td = document.createElement("td");
 136          tr.appendChild(td);
 137          this._monthSelect = document.createElement("select");
 138          this._monthSelect.className = "months";
 139          for (var i = 0 ; i < this.MonthNames.length ; i++) {
 140              var opt = document.createElement("option");
 141              opt.innerHTML = this.MonthNames[i];
 142              opt.value = i;
 143              if (i == this.selectedDate.getMonth()) {
 144                  opt.selected = true;
 145              }
 146              this._monthSelect.appendChild(opt);
 147          }
 148          td.appendChild(this._monthSelect);
 149  
 150  
 151          //
 152          // Create the year drop down
 153          //
 154          td = document.createElement("td");
 155          td.className = "labelContainer";
 156          tr.appendChild(td);
 157          this._yearSelect = document.createElement("select");
 158          for(var i=this.FromYear; i <= this.UpToYear; ++i) {
 159              var opt = document.createElement("option");
 160              opt.innerHTML = i;
 161              opt.value = i;
 162              if (i == this.selectedDate.getFullYear()) {
 163                  opt.selected = false;
 164              }
 165              this._yearSelect.appendChild(opt);
 166          }
 167          td.appendChild(this._yearSelect);
 168  
 169  
 170          td = document.createElement("td");
 171          var nextMonth = document.createElement("input");
 172          nextMonth.className = "nextMonthButton button";
 173          nextMonth.type = "button";
 174          nextMonth.value = ">>";
 175          td.appendChild(nextMonth);
 176          tr.appendChild(td);
 177  
 178          // Calendar body
 179          div = document.createElement("div");
 180          div.className = "calendarBody";
 181          this._calDiv.appendChild(div);
 182          var calendarBody = div;
 183  
 184          // Create the inside of calendar body
 185  
 186          var text;
 187          table = document.createElement("table");
 188          table.align="center";
 189          table.className = "grid";
 190  
 191          div.appendChild(table);
 192          var thead = document.createElement("thead");
 193          table.appendChild(thead);
 194          tr = document.createElement("tr");
 195          thead.appendChild(tr);
 196  
 197          for(i=0; i < 7; ++i) {
 198              td = document.createElement("th");
 199              text = document.createTextNode(this.ShortWeekDayNames[(i+this.FirstDayOfWeek)%7]);
 200              td.appendChild(text);
 201              td.className = "weekDayHead";
 202              tr.appendChild(td);
 203          }
 204  
 205          // Date grid
 206          tbody = document.createElement("tbody");
 207          table.appendChild(tbody);
 208  
 209          for(week=0; week<6; ++week) {
 210              tr = document.createElement("tr");
 211              tbody.appendChild(tr);
 212  
 213          for(day=0; day<7; ++day) {
 214                  td = document.createElement("td");
 215                  td.className = "calendarDate";
 216                  text = document.createTextNode(String.fromCharCode(160));
 217                  td.appendChild(text);
 218  
 219                  tr.appendChild(td);
 220                  var tmp = new Object();
 221                  tmp.tag = "DATE";
 222                  tmp.value = -1;
 223                  tmp.data = text;
 224                  this.dateSlot[(week*7)+day] = tmp;
 225  
 226                  Event.observe(td, "mouseover", this.hover.bindEvent(this));
 227                  Event.observe(td, "mouseout", this.hover.bindEvent(this));
 228  
 229              }
 230          }
 231  
 232          // Calendar Footer
 233          div = document.createElement("div");
 234          div.className = "calendarFooter";
 235          this._calDiv.appendChild(div);
 236  
 237          var todayButton = document.createElement("input");
 238          todayButton.type="button";
 239          todayButton.className = "todayButton";
 240          var today = this.newDate();
 241          var buttonText = today.SimpleFormat(this.Format,this);
 242          todayButton.value = buttonText;
 243          div.appendChild(todayButton);
 244  
 245          if(Prado.Browser().ie)
 246          {
 247              this.iePopUp = document.createElement('iframe');
 248              this.iePopUp.src = Prado.WebUI.TDatePicker.spacer;
 249              this.iePopUp.style.position = "absolute"
 250              this.iePopUp.scrolling="no"
 251              this.iePopUp.frameBorder="0"
 252              this.control.parentNode.appendChild(this.iePopUp);
 253          }
 254  
 255          this.control.parentNode.appendChild(this._calDiv);
 256  
 257          this.update();
 258          this.updateHeader();
 259  
 260          this.ieHack(true);
 261  
 262          // IE55+ extension
 263          previousMonth.hideFocus = true;
 264          nextMonth.hideFocus = true;
 265          todayButton.hideFocus = true;
 266          // end IE55+ extension
 267  
 268          // hook up events
 269          Event.observe(previousMonth, "click", this.prevMonth.bindEvent(this));
 270          Event.observe(nextMonth, "click", this.nextMonth.bindEvent(this));
 271          Event.observe(todayButton, "click", this.selectToday.bindEvent(this));
 272          //Event.observe(clearButton, "click", this.clearSelection.bindEvent(this));
 273          Event.observe(this._monthSelect, "change", this.monthSelect.bindEvent(this));
 274          Event.observe(this._yearSelect, "change", this.yearSelect.bindEvent(this));
 275  
 276          // ie6 extension
 277          Event.observe(this._calDiv, "mousewheel", this.mouseWheelChange.bindEvent(this));
 278  
 279          Event.observe(calendarBody, "click", this.selectDate.bindEvent(this));
 280  
 281          Prado.Element.focus(this.control);
 282  
 283      },
 284  
 285      ieHack : function(cleanup)
 286      {
 287          // IE hack
 288          if(this.iePopUp)
 289          {
 290              this.iePopUp.style.display = "block";
 291              this.iePopUp.style.top = (this._calDiv.offsetTop -1 ) + "px";
 292              this.iePopUp.style.left = (this._calDiv.offsetLeft -1)+ "px";
 293              this.iePopUp.style.width = Math.abs(this._calDiv.offsetWidth -2)+ "px";
 294              this.iePopUp.style.height = (this._calDiv.offsetHeight + 1)+ "px";
 295              if(cleanup) this.iePopUp.style.display = "none";
 296          }
 297      },
 298  
 299      keyPressed : function(ev)
 300      {
 301          if(!this.showing) return;
 302          if (!ev) ev = document.parentWindow.event;
 303          var kc = ev.keyCode != null ? ev.keyCode : ev.charCode;
 304  
 305          if(kc == Event.KEY_RETURN || kc == Event.KEY_SPACEBAR || kc == Event.KEY_TAB)
 306          {
 307              this.setSelectedDate(this.selectedDate);
 308              Event.stop(ev);
 309              this.hide();
 310          }
 311          if(kc == Event.KEY_ESC)
 312          {
 313              Event.stop(ev); this.hide();
 314          }
 315  
 316          var getDaysPerMonth = function (nMonth, nYear)
 317          {
 318              nMonth = (nMonth + 12) % 12;
 319              var days= [31,28,31,30,31,30,31,31,30,31,30,31];
 320              var res = days[nMonth];
 321              if (nMonth == 1) //feburary, leap years has 29
 322                  res += nYear % 4 == 0 && !(nYear % 400 == 0) ? 1 : 0;
 323              return res;
 324          }
 325  
 326          if(kc < 37 || kc > 40) return true;
 327  
 328          var current = this.selectedDate;
 329          var d = current.valueOf();
 330          if(kc == Event.KEY_LEFT)
 331          {
 332              if(ev.ctrlKey || ev.shiftKey) // -1 month
 333              {
 334                  current.setDate( Math.min(current.getDate(), getDaysPerMonth(current.getMonth() - 1,current.getFullYear())) ); // no need to catch dec -> jan for the year
 335                  d = current.setMonth( current.getMonth() - 1 );
 336              }
 337              else
 338                  d -= 86400000; //-1 day
 339          }
 340          else if (kc == Event.KEY_RIGHT)
 341          {
 342              if(ev.ctrlKey || ev.shiftKey) // +1 month
 343              {
 344                  current.setDate( Math.min(current.getDate(), getDaysPerMonth(current.getMonth() + 1,current.getFullYear())) ); // no need to catch dec -> jan for the year
 345                  d = current.setMonth( current.getMonth() + 1 );
 346              }
 347              else
 348                  d += 86400000; //+1 day
 349          }
 350          else if (kc == Event.KEY_UP)
 351          {
 352              if(ev.ctrlKey || ev.shiftKey) //-1 year
 353              {
 354                  current.setDate( Math.min(current.getDate(), getDaysPerMonth(current.getMonth(),current.getFullYear() - 1)) ); // no need to catch dec -> jan for the year
 355                  d = current.setFullYear( current.getFullYear() - 1 );
 356              }
 357              else
 358                  d -= 604800000; // -7 days
 359          }
 360          else if (kc == Event.KEY_DOWN)
 361          {
 362              if(ev.ctrlKey || ev.shiftKey) // +1 year
 363              {
 364                  current.setDate( Math.min(current.getDate(), getDaysPerMonth(current.getMonth(),current.getFullYear() + 1)) ); // no need to catch dec -> jan for the year
 365                  d = current.setFullYear( current.getFullYear() + 1 );
 366              }
 367              else
 368                  d += 7 * 24 * 61 * 60 * 1000; // +7 days
 369          }
 370          this.setSelectedDate(d);
 371          Event.stop(ev);
 372      },
 373  
 374      selectDate : function(ev)
 375      {
 376          var el = Event.element(ev);
 377          while (el.nodeType != 1)
 378              el = el.parentNode;
 379  
 380          while (el != null && el.tagName && el.tagName.toLowerCase() != "td")
 381              el = el.parentNode;
 382  
 383          // if no td found, return
 384          if (el == null || el.tagName == null || el.tagName.toLowerCase() != "td")
 385              return;
 386  
 387          var d = this.newDate(this.selectedDate);
 388          var n = Number(el.firstChild.data);
 389          if (isNaN(n) || n <= 0 || n == null)
 390              return;
 391  
 392          d.setDate(n);
 393          this.setSelectedDate(d);
 394          this.hide();
 395      },
 396  
 397      selectToday : function()
 398      {
 399          if(this.selectedDate.toISODate() == this.newDate().toISODate())
 400              this.hide();
 401  
 402          this.setSelectedDate(this.newDate());
 403      },
 404  
 405      clearSelection : function()
 406      {
 407          this.setSelectedDate(this.newDate());
 408          this.hide();
 409      },
 410  
 411      monthSelect : function(ev)
 412      {
 413          this.setMonth(Form.Element.getValue(Event.element(ev)));
 414      },
 415  
 416      yearSelect : function(ev)
 417      {
 418          this.setYear(Form.Element.getValue(Event.element(ev)));
 419      },
 420  
 421      // ie6 extension
 422      mouseWheelChange : function (e)
 423      {
 424          if (e == null) e = document.parentWindow.event;
 425          var n = - e.wheelDelta / 120;
 426          var d = this.newDate(this.selectedDate);
 427          var m = d.getMonth() + n;
 428          this.setMonth(m);
 429  
 430          return false;
 431      },
 432  
 433      onChange : function()
 434      {
 435          if(this.options.InputMode == "TextBox")
 436          {
 437              this.control.value = this.formatDate();
 438              Event.fireEvent(this.control, "change");
 439          }
 440          else
 441          {
 442              var day = Prado.WebUI.TDatePicker.getDayListControl(this.control);
 443              var month = Prado.WebUI.TDatePicker.getMonthListControl(this.control);
 444              var year = Prado.WebUI.TDatePicker.getYearListControl(this.control);
 445              var date = this.selectedDate;
 446              if(day)
 447              {
 448                  day.selectedIndex = date.getDate()-1;
 449              }
 450              if(month)
 451              {
 452                  month.selectedIndex = date.getMonth();
 453              }
 454              if(year)
 455              {
 456                  var years = year.options;
 457                  var currentYear = date.getFullYear();
 458                  for(var i = 0; i < years.length; i++)
 459                      years[i].selected = years[i].value.toInteger() == currentYear;
 460              }
 461              Event.fireEvent(day || month || year, "change");
 462          }
 463      },
 464  
 465      formatDate : function()
 466      {
 467          return this.selectedDate ? this.selectedDate.SimpleFormat(this.Format,this) : '';
 468      },
 469  
 470      newDate : function(date)
 471      {
 472          if(!date)
 473              date = new Date();
 474          if(typeof(date) == "string" || typeof(date) == "number")
 475              date = new Date(date);
 476          return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0,0,0);
 477      },
 478  
 479      setSelectedDate : function(date)
 480      {
 481          if (date == null)
 482              return;
 483          this.selectedDate = this.newDate(date);
 484  
 485          this.updateHeader();
 486          this.update();
 487          if (typeof(this.onChange) == "function")
 488              this.onChange(this, date);
 489      },
 490  
 491      getElement : function()
 492      {
 493          return this._calDiv;
 494      },
 495  
 496      getSelectedDate : function ()
 497      {
 498          return this.selectedDate == null ? null : this.newDate(this.selectedDate);
 499      },
 500  
 501      setYear : function(year)
 502      {
 503          var d = this.newDate(this.selectedDate);
 504          d.setFullYear(year);
 505          this.setSelectedDate(d);
 506      },
 507  
 508      setMonth : function (month)
 509      {
 510          var d = this.newDate(this.selectedDate);
 511          d.setMonth(month);
 512          this.setSelectedDate(d);
 513      },
 514  
 515      nextMonth : function ()
 516      {
 517          this.setMonth(this.selectedDate.getMonth()+1);
 518      },
 519  
 520      prevMonth : function ()
 521      {
 522          this.setMonth(this.selectedDate.getMonth()-1);
 523      },
 524  
 525      getDatePickerOffsetHeight : function()
 526      {
 527          if(this.options.InputMode == "TextBox")
 528              return this.control.offsetHeight;
 529  
 530          var control = Prado.WebUI.TDatePicker.getDayListControl(this.control);
 531          if(control) return control.offsetHeight;
 532  
 533          var control = Prado.WebUI.TDatePicker.getMonthListControl(this.control);
 534          if(control) return control.offsetHeight;
 535  
 536          var control = Prado.WebUI.TDatePicker.getYearListControl(this.control);
 537          if(control) return control.offsetHeight;
 538          return 0;
 539      },
 540  
 541      show : function()
 542      {
 543          this.create();
 544  
 545          if(!this.showing)
 546          {
 547              var pos = Position.positionedOffset(this.control);
 548  
 549              pos[1] += this.getDatePickerOffsetHeight();
 550  
 551              this._calDiv.style.display = "block";
 552              this._calDiv.style.top = (pos[1]-1) + "px";
 553              this._calDiv.style.left = pos[0] + "px";
 554  
 555              this.ieHack(false);
 556              this.documentClickEvent = this.hideOnClick.bindEvent(this);
 557              this.documentKeyDownEvent = this.keyPressed.bindEvent(this);
 558              Event.observe(document.body, "click", this.documentClickEvent);
 559              var date = this.getDateFromInput();
 560              if(date)
 561              {
 562                  this.selectedDate = date;
 563                  this.setSelectedDate(date);
 564              }
 565              Event.observe(document,"keydown", this.documentKeyDownEvent);
 566              this.showing = true;
 567          }
 568      },
 569  
 570      getDateFromInput : function()
 571      {
 572          if(this.options.InputMode == "TextBox")
 573              return Date.SimpleParse($F(this.control), this.Format);
 574          else
 575              return Prado.WebUI.TDatePicker.getDropDownDate(this.control);
 576      },
 577  
 578      //hide the calendar when clicked outside any calendar
 579      hideOnClick : function(ev)
 580      {
 581          if(!this.showing) return;
 582          var el = Event.element(ev);
 583          var within = false;
 584          do
 585          {
 586              within = within || (el.className && Element.hasClassName(el, "TDatePicker_"+this.CalendarStyle));
 587              within = within || el == this.trigger;
 588              within = within || el == this.control;
 589              if(within) break;
 590              el = el.parentNode;
 591          }
 592          while(el);
 593          if(!within) this.hide();
 594      },
 595  
 596  
 597      hide : function()
 598      {
 599          if(this.showing)
 600          {
 601              this._calDiv.style.display = "none";
 602              if(this.iePopUp)
 603                  this.iePopUp.style.display = "none";
 604              this.showing = false;
 605              Event.stopObserving(document.body, "click", this.documentClickEvent);
 606              Event.stopObserving(document,"keydown", this.documentKeyDownEvent);
 607          }
 608      },
 609  
 610      update : function()
 611      {
 612          // Calculate the number of days in the month for the selected date
 613          var date = this.selectedDate;
 614          var today = (this.newDate()).toISODate();
 615  
 616          var selected = date.toISODate();
 617          var d1 = new Date(date.getFullYear(), date.getMonth(), 1);
 618          var d2 = new Date(date.getFullYear(), date.getMonth()+1, 1);
 619          var monthLength = Math.round((d2 - d1) / (24 * 60 * 60 * 1000));
 620  
 621          // Find out the weekDay index for the first of this month
 622          var firstIndex = (d1.getDay() - this.FirstDayOfWeek) % 7 ;
 623          if (firstIndex < 0)
 624              firstIndex += 7;
 625  
 626          var index = 0;
 627          while (index < firstIndex) {
 628              this.dateSlot[index].value = -1;
 629              this.dateSlot[index].data.data = String.fromCharCode(160);
 630              this.dateSlot[index].data.parentNode.className = "empty";
 631              index++;
 632          }
 633  
 634          for (i = 1; i <= monthLength; i++, index++) {
 635              var slot = this.dateSlot[index];
 636              var slotNode = slot.data.parentNode;
 637              slot.value = i;
 638              slot.data.data = i;
 639              slotNode.className = "date";
 640              //slotNode.style.color = "";
 641              if (d1.toISODate() == today) {
 642                  slotNode.className += " today";
 643              }
 644              if (d1.toISODate() == selected) {
 645              //    slotNode.style.color = "blue";
 646                  slotNode.className += " selected";
 647              }
 648              d1 = new Date(d1.getFullYear(), d1.getMonth(), d1.getDate()+1);
 649          }
 650  
 651          var lastDateIndex = index;
 652  
 653          while(index < 42) {
 654              this.dateSlot[index].value = -1;
 655              this.dateSlot[index].data.data = String.fromCharCode(160);
 656              this.dateSlot[index].data.parentNode.className = "empty";
 657              ++index;
 658          }
 659  
 660      },
 661  
 662      hover : function(ev)
 663      {
 664          if(Event.element(ev).tagName)
 665          {
 666              if(ev.type == "mouseover")
 667                  Event.element(ev).addClassName("hover");
 668                  else
 669                  Event.element(ev).removeClassName("hover");
 670          }
 671      },
 672  
 673      updateHeader : function () {
 674  
 675          var options = this._monthSelect.options;
 676          var m = this.selectedDate.getMonth();
 677          for(var i=0; i < options.length; ++i) {
 678              options[i].selected = false;
 679              if (options[i].value == m) {
 680                  options[i].selected = true;
 681              }
 682          }
 683  
 684          options = this._yearSelect.options;
 685          var year = this.selectedDate.getFullYear();
 686          for(var i=0; i < options.length; ++i) {
 687              options[i].selected = false;
 688              if (options[i].value == year) {
 689                  options[i].selected = true;
 690              }
 691          }
 692  
 693      }
 694  
 695  
 696  };
 697