WB 2.08.x

/***********************************************

 Fool-Proof Date Input Script with DHTML Calendar

 by Jason Moon - calendar@moonscript.com

 ************************************************/

// Customizable variables

var DefaultDateFormat = 'MM/DD/YYYY'; // If no date format is supplied, this will be used instead

var HideWait = 3; // Number of seconds before the calendar will disappear

var Y2kPivotPoint = 76; // 2-digit years before this point will be created in the 21st century

var UnselectedMonthText = ''; // Text to display in the 1st month list item when the date isn't required

var FontSize = 11; // In pixels

var FontFamily = 'Tahoma';

var CellWidth = 18;

var CellHeight = 16;

var ImageURL = 'calendar/calendar.jpg';

var NextURL = 'calendar/next.gif';

var PrevURL = 'calendar/prev.gif';

var CalBGColor = 'white';

var TopRowBGColor = 'buttonface';

var DayBGColor = 'lightgrey';

// Global variables

var ZCounter = 100;

var Today = new Date();

var WeekDays = new Array('S','M','T','W','T','F','S');

var MonthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

var MonthNames = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

// Write out the stylesheet definition for the calendar

with (document) {

   writeln('<style>');

   writeln('td.calendarDateInput {letter-spacing:normal;line-height:normal;font-family:' + FontFamily + ',Sans-Serif;font-size:' + FontSize + 'px;}');

   writeln('select.calendarDateInput {letter-spacing:.06em;font-family:Verdana,Sans-Serif;font-size:11px;}');

   writeln('input.calendarDateInput {letter-spacing:.06em;font-family:Verdana,Sans-Serif;font-size:11px;}');

   writeln('</style>');

}

// Only allows certain keys to be used in the date field

function YearDigitsOnly(e) {

   var KeyCode = (e.keyCode) ? e.keyCode : e.which;

   return ((KeyCode == 8) // backspace

        || (KeyCode == 9) // tab

        || (KeyCode == 37) // left arrow

        || (KeyCode == 39) // right arrow

        || (KeyCode == 46) // delete

        || ((KeyCode > 47) && (KeyCode < 58)) // 0 - 9

   );

}

// Gets the absolute pixel position of the supplied element

function GetTagPixels(StartTag, Direction) {

   var PixelAmt = (Direction == 'LEFT') ? StartTag.offsetLeft : StartTag.offsetTop;

   while ((StartTag.tagName != 'BODY') && (StartTag.tagName != 'HTML')) {

      StartTag = StartTag.offsetParent;

      PixelAmt += (Direction == 'LEFT') ? StartTag.offsetLeft : StartTag.offsetTop;

   }

   return PixelAmt;

}

// Is the specified select-list behind the calendar?

function BehindCal(SelectList, CalLeftX, CalRightX, CalTopY, CalBottomY, ListTopY) {

   var ListLeftX = GetTagPixels(SelectList, 'LEFT');

   var ListRightX = ListLeftX + SelectList.offsetWidth;

   var ListBottomY = ListTopY + SelectList.offsetHeight;

   return (((ListTopY < CalBottomY) && (ListBottomY > CalTopY)) && ((ListLeftX < CalRightX) && (ListRightX > CalLeftX)));

}

// For IE, hides any select-lists that are behind the calendar

function FixSelectLists(Over) {

   if (navigator.appName == 'Microsoft Internet Explorer') {

      var CalDiv = this.getCalendar();

      var CalLeftX = CalDiv.offsetLeft;

      var CalRightX = CalLeftX + CalDiv.offsetWidth;

      var CalTopY = CalDiv.offsetTop;

      var CalBottomY = CalTopY + (CellHeight * 9);

      var FoundCalInput = false;

      formLoop :

      for (var j=this.formNumber;j<document.forms.length;j++) {

         for (var i=0;i<document.forms[j].elements.length;i++) {

            if (typeof document.forms[j].elements[i].type == 'string') {

               if ((document.forms[j].elements[i].type == 'hidden') && (document.forms[j].elements[i].name == this.hiddenFieldName)) {

                  FoundCalInput = true;

                  i += 3; // 3 elements between the 1st hidden field and the last year input field

               }

               if (FoundCalInput) {

                  if (document.forms[j].elements[i].type.substr(0,6) == 'select') {

                     ListTopY = GetTagPixels(document.forms[j].elements[i], 'TOP');

                     if (ListTopY < CalBottomY) {

                        if (BehindCal(document.forms[j].elements[i], CalLeftX, CalRightX, CalTopY, CalBottomY, ListTopY)) {

                           document.forms[j].elements[i].style.visibility = (Over) ? 'hidden' : 'visible';

                        }

                     }

                     else break formLoop;

                  }

               }

            }

         }

      }

   }

}

// Displays a message in the status bar when hovering over the calendar days

function DayCellHover(Cell, Over, Color, HoveredDay) {

   Cell.style.backgroundColor = (Over) ? DayBGColor : Color;

   if (Over) {

      if ((this.yearValue == Today.getFullYear()) && (this.monthIndex == Today.getMonth()) && (HoveredDay == Today.getDate())) self.status = 'Click to select today';

      else {

         var Suffix = HoveredDay.toString();

         switch (Suffix.substr(Suffix.length - 1, 1)) {

            case '1' : Suffix += (HoveredDay == 11) ? 'th' : 'st'; break;

            case '2' : Suffix += (HoveredDay == 12) ? 'th' : 'nd'; break;

            case '3' : Suffix += (HoveredDay == 13) ? 'th' : 'rd'; break;

            default : Suffix += 'th'; break;

         }

         self.status = 'Click to select ' + this.monthName + ' ' + Suffix;

      }

   }

   else self.status = '';

   return true;

}

// Sets the form elements after a day has been picked from the calendar

function PickDisplayDay(ClickedDay) {

   this.show();

   var MonthList = this.getMonthList();

   var DayList = this.getDayList();

   var YearField = this.getYearField();

   FixDayList(DayList, GetDayCount(this.displayed.yearValue, this.displayed.monthIndex));

   // Select the month and day in the lists

   for (var i=0;i<MonthList.length;i++) {

      if (MonthList.options[i].value == this.displayed.monthIndex) MonthList.options[i].selected = true;

   }

   for (var j=1;j<=DayList.length;j++) {

      if (j == ClickedDay) DayList.options[j-1].selected = true;

   }

   this.setPicked(this.displayed.yearValue, this.displayed.monthIndex, ClickedDay);

   // Change the year, if necessary

   YearField.value = this.picked.yearPad;

   YearField.defaultValue = YearField.value;

}

// Builds the HTML for the calendar days

function BuildCalendarDays() {

   var Rows = 5;

   if (((this.displayed.dayCount == 31) && (this.displayed.firstDay > 4)) || ((this.displayed.dayCount == 30) && (this.displayed.firstDay == 6))) Rows = 6;

   else if ((this.displayed.dayCount == 28) && (this.displayed.firstDay == 0)) Rows = 4;

   var HTML = '<table width="' + (CellWidth * 7) + '" cellspacing="0" cellpadding="1" style="cursor:default">';

   for (var j=0;j<Rows;j++) {

      HTML += '<tr>';

      for (var i=1;i<=7;i++) {

         Day = (j * 7) + (i - this.displayed.firstDay);

         if ((Day >= 1) && (Day <= this.displayed.dayCount)) {

            if ((this.displayed.yearValue == this.picked.yearValue) && (this.displayed.monthIndex == this.picked.monthIndex) && (Day == this.picked.day)) {

               TextStyle = 'color:white;font-weight:bold;'

               BackColor = DayBGColor;

            }

            else {

               TextStyle = 'color:black;'

               BackColor = CalBGColor;

            }

            if ((this.displayed.yearValue == Today.getFullYear()) && (this.displayed.monthIndex == Today.getMonth()) && (Day == Today.getDate())) TextStyle += 'border:1px solid darkred;padding:0px;';

            HTML += '<td align="center" class="calendarDateInput" style="cursor:default;height:' + CellHeight + ';width:' + CellWidth + ';' + TextStyle + ';background-color:' + BackColor + '" onClick="' + this.objName + '.pickDay(' + Day + ')" onMouseOver="return ' + this.objName + '.displayed.dayHover(this,true,\'' + BackColor + '\',' + Day + ')" onMouseOut="return ' + this.objName + '.displayed.dayHover(this,false,\'' + BackColor + '\')">' + Day + '</td>';

         }

         else HTML += '<td class="calendarDateInput" style="height:' + CellHeight + '">&nbsp;</td>';

      }

      HTML += '</tr>';

   }

   return HTML += '</table>';

}

// Determines which century to use (20th or 21st) when dealing with 2-digit years

function GetGoodYear(YearDigits) {

   if (YearDigits.length == 4) return YearDigits;

   else {

      var Millennium = (YearDigits < Y2kPivotPoint) ? 2000 : 1900;

      return Millennium + parseInt(YearDigits,10);

   }

}

// Returns the number of days in a month (handles leap-years)

function GetDayCount(SomeYear, SomeMonth) {

   return ((SomeMonth == 1) && ((SomeYear % 400 == 0) || ((SomeYear % 4 == 0) && (SomeYear % 100 != 0)))) ? 29 : MonthDays[SomeMonth];

}

// Highlights the buttons

function VirtualButton(Cell, ButtonDown) {

   if (ButtonDown) {

      Cell.style.borderLeft = 'buttonshadow 1px solid';

      Cell.style.borderTop = 'buttonshadow 1px solid';

      Cell.style.borderBottom = 'buttonhighlight 1px solid';

      Cell.style.borderRight = 'buttonhighlight 1px solid';

   }

   else {

      Cell.style.borderLeft = 'buttonhighlight 1px solid';

      Cell.style.borderTop = 'buttonhighlight 1px solid';

      Cell.style.borderBottom = 'buttonshadow 1px solid';

      Cell.style.borderRight = 'buttonshadow 1px solid';

   }

}

// Mouse-over for the previous/next month buttons

function NeighborHover(Cell, Over, DateObj) {

   if (Over) {

      VirtualButton(Cell, false);

      self.status = 'Click to view ' + DateObj.fullName;

   }

   else {

      Cell.style.border = 'buttonface 1px solid';

      self.status = '';

   }

   return true;

}

// Adds/removes days from the day list, depending on the month/year

function FixDayList(DayList, NewDays) {

   var DayPick = DayList.selectedIndex + 1;

   if (NewDays != DayList.length) {

      var OldSize = DayList.length;

      for (var k=Math.min(NewDays,OldSize);k<Math.max(NewDays,OldSize);k++) {

         (k >= NewDays) ? DayList.options[NewDays] = null : DayList.options[k] = new Option(k+1, k+1);

      }

      DayPick = Math.min(DayPick, NewDays);

      DayList.options[DayPick-1].selected = true;

   }

   return DayPick;

}

// Resets the year to its previous valid value when something invalid is entered

function FixYearInput(YearField) {

   var YearRE = new RegExp('\\d{' + YearField.defaultValue.length + '}');

   if (!YearRE.test(YearField.value)) YearField.value = YearField.defaultValue;

}

// Displays a message in the status bar when hovering over the calendar icon

function CalIconHover(Over) {

   var Message = (this.isShowing()) ? 'hide' : 'show';

   self.status = (Over) ? 'Click to ' + Message + ' the calendar' : '';

   return true;

}

// Starts the timer over from scratch

function CalTimerReset() {

   eval('clearTimeout(' + this.timerID + ')');

   eval(this.timerID + '=setTimeout(\'' + this.objName + '.show()\',' + (HideWait * 1000) + ')');

}

// The timer for the calendar

function DoTimer(CancelTimer) {

   if (CancelTimer) eval('clearTimeout(' + this.timerID + ')');

   else {

      eval(this.timerID + '=null');

      this.resetTimer();

   }

}

// Show or hide the calendar

function ShowCalendar() {

   if (this.isShowing()) {

      var StopTimer = true;

      this.getCalendar().style.zIndex = --ZCounter;

      this.getCalendar().style.visibility = 'hidden';

      this.fixSelects(false);

   }

   else {

      var StopTimer = false;

      this.fixSelects(true);

      this.getCalendar().style.zIndex = ++ZCounter;

      this.getCalendar().style.visibility = 'visible';

   }

   this.handleTimer(StopTimer);

   self.status = '';

}

// Hides the input elements when the "blank" month is selected

function SetElementStatus(Hide) {

   this.getDayList().style.visibility = (Hide) ? 'hidden' : 'visible';

   this.getYearField().style.visibility = (Hide) ? 'hidden' : 'visible';

   this.getCalendarLink().style.visibility = (Hide) ? 'hidden' : 'visible';

}

// Sets the date, based on the month selected

function CheckMonthChange(MonthList) {

   var DayList = this.getDayList();

   if (MonthList.options[MonthList.selectedIndex].value == '') {

      DayList.selectedIndex = 0;

      this.hideElements(true);

      this.setHidden('');

   }

   else {

      this.hideElements(false);

      if (this.isShowing()) {

         this.resetTimer(); // Gives the user more time to view the calendar with the newly-selected month

         this.getCalendar().style.zIndex = ++ZCounter; // Make sure this calendar is on top of any other calendars

      }

      var DayPick = FixDayList(DayList, GetDayCount(this.picked.yearValue, MonthList.options[MonthList.selectedIndex].value));

      this.setPicked(this.picked.yearValue, MonthList.options[MonthList.selectedIndex].value, DayPick);

   }

}

// Sets the date, based on the day selected

function CheckDayChange(DayList) {

   if (this.isShowing()) this.show();

   this.setPicked(this.picked.yearValue, this.picked.monthIndex, DayList.selectedIndex+1);

}

// Changes the date when a valid year has been entered

function CheckYearInput(YearField) {

   if ((YearField.value.length == YearField.defaultValue.length) && (YearField.defaultValue != YearField.value)) {

      if (this.isShowing()) {

         this.resetTimer(); // Gives the user more time to view the calendar with the newly-entered year

         this.getCalendar().style.zIndex = ++ZCounter; // Make sure this calendar is on top of any other calendars

      }

      var NewYear = GetGoodYear(YearField.value);

      var MonthList = this.getMonthList();

      var NewDay = FixDayList(this.getDayList(), GetDayCount(NewYear, this.picked.monthIndex));

      this.setPicked(NewYear, this.picked.monthIndex, NewDay);

      YearField.defaultValue = YearField.value;

   }

}

// Holds characteristics about a date

function dateObject() {

   if (Function.call) { // Used when 'call' method of the Function object is supported

      var ParentObject = this;

      var ArgumentStart = 0;

   }

   else { // Used with 'call' method of the Function object is NOT supported

      var ParentObject = arguments[0];

      var ArgumentStart = 1;

   }

   ParentObject.date = (arguments.length == (ArgumentStart+1)) ? new Date(arguments[ArgumentStart+0]) : new Date(arguments[ArgumentStart+0], arguments[ArgumentStart+1], arguments[ArgumentStart+2]);

   ParentObject.yearValue = ParentObject.date.getFullYear();

   ParentObject.monthIndex = ParentObject.date.getMonth();

   ParentObject.monthName = MonthNames[ParentObject.monthIndex];

   ParentObject.fullName = ParentObject.monthName + ' ' + ParentObject.yearValue;

   ParentObject.day = ParentObject.date.getDate();

   ParentObject.dayCount = GetDayCount(ParentObject.yearValue, ParentObject.monthIndex);

   var FirstDate = new Date(ParentObject.yearValue, ParentObject.monthIndex, 1);

   ParentObject.firstDay = FirstDate.getDay();

}

// Keeps track of the date that goes into the hidden field

function storedMonthObject(DateFormat, DateYear, DateMonth, DateDay) {

   (Function.call) ? dateObject.call(this, DateYear, DateMonth, DateDay) : dateObject(this, DateYear, DateMonth, DateDay);

   this.yearPad = this.yearValue.toString();

   this.monthPad = (this.monthIndex < 9) ? '0' + String(this.monthIndex + 1) : this.monthIndex + 1;

   this.dayPad = (this.day < 10) ? '0' + this.day.toString() : this.day;

   this.monthShort = this.monthName.substr(0,3).toUpperCase();

   // Formats the year with 2 digits instead of 4

   if (DateFormat.indexOf('YYYY') == -1) this.yearPad = this.yearPad.substr(2);

   // Define the date-part delimiter

   if (DateFormat.indexOf('/') >= 0) var Delimiter = '/';

   else if (DateFormat.indexOf('-') >= 0) var Delimiter = '-';

   else var Delimiter = '';

   // Determine the order of the months and days

   if (/DD?.?((MON)|(MM?M?))/.test(DateFormat)) {

      this.formatted = this.dayPad + Delimiter;

      this.formatted += (RegExp.$1.length == 3) ? this.monthShort : this.monthPad;

   }

   else if (/((MON)|(MM?M?))?.?DD?/.test(DateFormat)) {

      this.formatted = (RegExp.$1.length == 3) ? this.monthShort : this.monthPad;

      this.formatted += Delimiter + this.dayPad;

   }

   // Either prepend or append the year to the formatted date

   this.formatted = (DateFormat.substr(0,2) == 'YY') ? this.yearPad + Delimiter + this.formatted : this.formatted + Delimiter + this.yearPad;

}

// Object for the current displayed month

function displayMonthObject(ParentObject, DateYear, DateMonth, DateDay) {

   (Function.call) ? dateObject.call(this, DateYear, DateMonth, DateDay) : dateObject(this, DateYear, DateMonth, DateDay);

   this.displayID = ParentObject.hiddenFieldName + '_Current_ID';

   this.getDisplay = new Function('return document.getElementById(this.displayID)');

   this.dayHover = DayCellHover;

   this.goCurrent = new Function(ParentObject.objName + '.getCalendar().style.zIndex=++ZCounter;' + ParentObject.objName + '.setDisplayed(Today.getFullYear(),Today.getMonth());');

   if (ParentObject.formNumber >= 0) this.getDisplay().innerHTML = this.fullName;

}

// Object for the previous/next buttons

function neighborMonthObject(ParentObject, IDText, DateMS) {

   (Function.call) ? dateObject.call(this, DateMS) : dateObject(this, DateMS);

   this.buttonID = ParentObject.hiddenFieldName + '_' + IDText + '_ID';

   this.hover = new Function('C','O','NeighborHover(C,O,this)');

   this.getButton = new Function('return document.getElementById(this.buttonID)');

   this.go = new Function(ParentObject.objName + '.getCalendar().style.zIndex=++ZCounter;' + ParentObject.objName + '.setDisplayed(this.yearValue,this.monthIndex);');

   if (ParentObject.formNumber >= 0) this.getButton().title = this.monthName;

}

// Sets the currently-displayed month object

function SetDisplayedMonth(DispYear, DispMonth) {

   this.displayed = new displayMonthObject(this, DispYear, DispMonth, 1);

   // Creates the previous and next month objects

   this.previous = new neighborMonthObject(this, 'Previous', this.displayed.date.getTime() - 86400000);

   this.next = new neighborMonthObject(this, 'Next', this.displayed.date.getTime() + (86400000 * (this.displayed.dayCount + 1)));

   // Creates the HTML for the calendar

   if (this.formNumber >= 0) this.getDayTable().innerHTML = this.buildCalendar();

}

// Sets the current selected date

function SetPickedMonth(PickedYear, PickedMonth, PickedDay) {

   this.picked = new storedMonthObject(this.format, PickedYear, PickedMonth, PickedDay);

   this.setHidden(this.picked.formatted);

   this.setDisplayed(PickedYear, PickedMonth);

}

// The calendar object

function calendarObject(DateName, DateFormat, DefaultDate) {

   /* Properties */

   this.hiddenFieldName = DateName;

   this.monthListID = DateName + '_Month_ID';

   this.dayListID = DateName + '_Day_ID';

   this.yearFieldID = DateName + '_Year_ID';

   this.monthDisplayID = DateName + '_Current_ID';

   this.calendarID = DateName + '_ID';

   this.dayTableID = DateName + '_DayTable_ID';

   this.calendarLinkID = this.calendarID + '_Link';

   this.timerID = this.calendarID + '_Timer';

   this.objName = DateName + '_Object';

   this.format = DateFormat;

   this.formNumber = -1;

   this.picked = null;

   this.displayed = null;

   this.previous = null;

   this.next = null;

   /* Methods */

   this.setPicked = SetPickedMonth;

   this.setDisplayed = SetDisplayedMonth;

   this.checkYear = CheckYearInput;

   this.fixYear = FixYearInput;

   this.changeMonth = CheckMonthChange;

   this.changeDay = CheckDayChange;

   this.resetTimer = CalTimerReset;

   this.hideElements = SetElementStatus;

   this.show = ShowCalendar;

   this.handleTimer = DoTimer;

   this.iconHover = CalIconHover;

   this.buildCalendar = BuildCalendarDays;

   this.pickDay = PickDisplayDay;

   this.fixSelects = FixSelectLists;

   this.setHidden = new Function('D','if (this.formNumber >= 0) this.getHiddenField().value=D');

   // Returns a reference to these elements

   this.getHiddenField = new Function('return document.forms[this.formNumber].elements[this.hiddenFieldName]');

   this.getMonthList = new Function('return document.getElementById(this.monthListID)');

   this.getDayList = new Function('return document.getElementById(this.dayListID)');

   this.getYearField = new Function('return document.getElementById(this.yearFieldID)');

   this.getCalendar = new Function('return document.getElementById(this.calendarID)');

   this.getDayTable = new Function('return document.getElementById(this.dayTableID)');

   this.getCalendarLink = new Function('return document.getElementById(this.calendarLinkID)');

   this.getMonthDisplay = new Function('return document.getElementById(this.monthDisplayID)');

   this.isShowing = new Function('return !(this.getCalendar().style.visibility != \'visible\')');

   /* Constructor */

   // Functions used only by the constructor

   function getMonthIndex(MonthAbbr) { // Returns the index (0-11) of the supplied month abbreviation

      for (var MonPos=0;MonPos<MonthNames.length;MonPos++) {

         if (MonthNames[MonPos].substr(0,3).toUpperCase() == MonthAbbr.toUpperCase()) break;

      }

      return MonPos;

   }

   function SetGoodDate(CalObj, Notify) { // Notifies the user about their bad default date, and sets the current system date

      CalObj.setPicked(Today.getFullYear(), Today.getMonth(), Today.getDate());

      if (Notify) alert('WARNING: The supplied date is not in valid \'' + DateFormat + '\' format: ' + DefaultDate + '.\nTherefore, the current system date will be used instead: ' + CalObj.picked.formatted);

   }

   // Main part of the constructor

   if (DefaultDate != '') {

      if ((this.format == 'YYYYMMDD') && (/^(\d{4})(\d{2})(\d{2})$/.test(DefaultDate))) this.setPicked(RegExp.$1, parseInt(RegExp.$2,10)-1, RegExp.$3);

      else {

         // Get the year

         if ((this.format.substr(0,2) == 'YY') && (/^(\d{2,4})(-|\/)/.test(DefaultDate))) { // Year is at the beginning

            var YearPart = GetGoodYear(RegExp.$1);

            // Determine the order of the months and days

            if (/(-|\/)(\w{1,3})(-|\/)(\w{1,3})$/.test(DefaultDate)) {

               var MidPart = RegExp.$2;

               var EndPart = RegExp.$4;

               if (/D$/.test(this.format)) { // Ends with days

                  var DayPart = EndPart;

                  var MonthPart = MidPart;

               }

               else {

                  var DayPart = MidPart;

                  var MonthPart = EndPart;

               }

               MonthPart = (/\d{1,2}/i.test(MonthPart)) ? parseInt(MonthPart,10)-1 : getMonthIndex(MonthPart);

               this.setPicked(YearPart, MonthPart, DayPart);

            }

            else SetGoodDate(this, true);

         }

         else if (/(-|\/)(\d{2,4})$/.test(DefaultDate)) { // Year is at the end

            var YearPart = GetGoodYear(RegExp.$2);

            // Determine the order of the months and days

            if (/^(\w{1,3})(-|\/)(\w{1,3})(-|\/)/.test(DefaultDate)) {

               if (this.format.substr(0,1) == 'D') { // Starts with days

                  var DayPart = RegExp.$1;

                  var MonthPart = RegExp.$3;

               }

               else { // Starts with months

                  var MonthPart = RegExp.$1;

                  var DayPart = RegExp.$3;

               }

               MonthPart = (/\d{1,2}/i.test(MonthPart)) ? parseInt(MonthPart,10)-1 : getMonthIndex(MonthPart);

               this.setPicked(YearPart, MonthPart, DayPart);

            }

            else SetGoodDate(this, true);

         }

         else SetGoodDate(this, true);

      }

   }

}

// Main function that creates the form elements

function DateInput(DateName, Required, DateFormat, DefaultDate) {