/***********************************************
Fool-Proof Date Input Script with DHTML Calendar
by Jason Moon - webmaster@moonfam.net
************************************************/
// 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 FontSize = 11; // In pixels
var FontFamily = 'Tahoma';
var CellWidth = 18;
var CellHeight = 16;
var ImageURL = 'images/calendar.jpg';
var NextURL = 'images/next.gif';
var PrevURL = 'images/prev.gif';
var CalBGColor = 'white';
var TopRowBGColor = 'buttonface';
var DayBGColor = 'lightgrey';
// Global variables
var ZCounter = 100;
var Today = new Date();
var WeekDays = new Array('So','Mo','Di','Mi','Do','Fr','Sa');
// var WeekDays = new Array('Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag');
var MonthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var MonthNames = new Array('Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember');
//var WeekDays = new Array('S','M','T','W','T','F','S');
// Write out the stylesheet definition for the calendar
with (document) {
writeln('');
}
// Only allows certain keys to be used in the date field
function NumOnly(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 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 = '
';
for (var j=0;j';
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 += '
' + Day + '
';
}
else HTML += '
';
}
HTML += '';
}
return HTML += '
';
}
// 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= 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()) ? 'schließen' : 'öffnen';
self.status = (Over) ? 'Klicken um Kalender zu ' + Message + '' : '';
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() {
this.date = (arguments.length == 1) ? new Date(arguments[0]) : new Date(arguments[0], arguments[1], arguments[2]);
this.yearValue = this.date.getFullYear();
this.monthIndex = this.date.getMonth();
this.monthName = MonthNames[this.monthIndex];
this.fullName = this.monthName + ' ' + this.yearValue;
this.day = this.date.getDate();
this.dayCount = GetDayCount(this.yearValue, this.monthIndex);
var FirstDate = new Date(this.yearValue, this.monthIndex, 1);
this.firstDay = FirstDate.getDay();
}
// Keeps track of the date that goes into the hidden field
function storedMonthObject(DateFormat, DateYear, DateMonth, DateDay) {
dateObject.call(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 value
if (DateFormat != 'YYYYMMDD') {
DateFormat.match(/(Y{2,4})$/);
if (RegExp.$1.length == 2) this.yearPad = this.yearPad.substr(2);
}
// Formats the date
if (/YYYYMMDD/.test(DateFormat)) this.formatted = this.yearPad + this.monthPad + this.dayPad;
else {
if (/MM?\/DD?\/Y{2,4}/.test(DateFormat)) var FirstPart = this.monthPad + '/' + this.dayPad + '/';
else if (/DD?\/MM?\/Y{2,4}/.test(DateFormat)) var FirstPart = this.dayPad + '/' + this.monthPad + '/';
else if (/DD?-((MON)|(MMM))-Y{2,4}/.test(DateFormat)) var FirstPart = this.dayPad + '-' + this.monthShort + '-';
else if (/((MON)|(MMM))-DD?-Y{2,4}/.test(DateFormat)) var FirstPart = this.monthShort + '-' + this.dayPad + '-';
this.formatted = FirstPart + this.yearPad;
}
}
// Object for the current displayed month
function displayMonthObject(ParentObject, DateYear, DateMonth, DateDay) {
dateObject.call(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) {
dateObject.call(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.monthListName = DateName + '_Month';
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.forms[this.formNumber].elements[this.monthListName]');
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 0) REMonths += '|';
REMonths += MonthNames[j].substr(0,3).toUpperCase();
}
if (this.format.substr(0,1) == 'D') {
var DateRE = new RegExp('^(\\d{1,2})-(' + REMonths + ')-(\\d{2,4})$', 'i');
(DateRE.test(DefaultDate)) ? this.setPicked(GetGoodYear(RegExp.$3), getMonthIndex(RegExp.$2), RegExp.$1) : SetGoodDate(this, true);
}
else {
var DateRE = new RegExp('^(' + REMonths + ')-(\\d{1,2})-(\\d{2,4})$', 'i');
(DateRE.test(DefaultDate)) ? this.setPicked(GetGoodYear(RegExp.$3), getMonthIndex(RegExp.$1), RegExp.$2) : SetGoodDate(this, true);
}
}
}
}
}
// Main function that creates the form elements
function DateInput(DateName, Required, DateFormat, DefaultDate) {
if (DateName == undefined) document.writeln('ERROR: Missing required parameter in call to \'DateInput\': [name of hidden date field].');
else {
if (Required == undefined) Required = false;
if (DateFormat == undefined) DateFormat = DefaultDateFormat;
else if ((/^YYYYMMDD$/i.test(DateFormat)) || (/^((MM?)|(DD?))\/((MM?)|(DD?))\/Y{2,4}$/i.test(DateFormat)) || (/^((DD?)|((MON)|(MMM)))-((DD?)|((MON)|(MMM)))-Y{2,4}$/i.test(DateFormat))) DateFormat = DateFormat.toUpperCase();
else {
var AlertMessage = 'WARNING: The supplied date format for the \'' + DateName + '\' field is not valid: ' + DateFormat + '\nTherefore, the default date format will be used instead: ' + DefaultDateFormat;
var CurrentDate = new storedMonthObject(DefaultDateFormat, Today.getFullYear(), Today.getMonth(), Today.getDate());
if (DefaultDate != undefined) AlertMessage += '\n\nThe supplied date cannot be interpreted with the invalid format.\nTherefore, the current system date will be used instead: ' + CurrentDate.formatted;
DateFormat = DefaultDateFormat;
DefaultDate = CurrentDate.formatted;
alert(AlertMessage);
}
// Creates the calendar object!
eval(DateName + '_Object=new calendarObject(\'' + DateName + '\',\'' + DateFormat + '\',\'' + DefaultDate + '\')');
if ((!Required) && (DefaultDate == undefined)) {
var InitialStatus = ' style="visibility:hidden"';
var InitialDate = '';
}
else {
var InitialStatus = '';
var InitialDate = eval(DateName + '_Object.picked.formatted');
}
if ((Required) && (DefaultDate == undefined)) DefaultDate = eval(DateName + '_Object.picked.formatted');
// Create the form elements
with (document) {
writeln('');
// Find this form number
for (var f=0;f