/*Date Picker Introduction After searching some time for a popup date picker for a project, I realised that I am unable to find one which at the same time has a layout that caught my eyes, and one that can fulfill the minimum requirement of cross browser compatibility and user friendliness. At the same time, I am beginning to be awed by the ability of DHTML, hence set myself this project to do after my work during my free time. Of course, this might not be the perfect date picker, or the nicest one in the world. Some features like NS4 (Netscape 4) compatibility are omitted, seriously because I have not yet picked up NS4's DHTML techniques. However, with the release of Netscape 6, after some time, I might not need to pick it up at all, hopefully (^_^;) Demonstration # 1 This demonstration caters for Netscape 4, but showing the date value in a text box. The trigger is a button, and the data container is the text box. Demonstration # 2 The following demonstration uses a button as both a trigger and data container. (You will not see anything below if you are using Netscape Navigator 4) How To Use Usage is very simple. Firstly, you will need to include a javascript library at the top of your html file like this ... After which, put the following line inside the onclick event of a button, popUpCalendar(this, this, "d mmm yyyy") The first "this" in the parameter list refers to the trigger control (in this case the button). The second "this" refer to the control to hold the value of the date, which is the same button in this case. The third parameter refers to the date format. The date format can have three types of separators: hyphen(-), space( ), or slash(/), but must be consistent in their usage. E.g. d/m/yyyy The acceptable tokens are :- d - date dd - date (padded with 0 if less than 10) m - month (in numbers) mm - month (in numbers, padded with 0 if less than 10) mmm - month (in words) yyyy - year The default value you place in the date container must be the same format as the format you specified, otherwise, hmm... I also dunno what will happen. Maybe you test it out and email me :) To fix the position of the popup calendar, you can change the values of the variables fixedX and fixedY. Setting them to -1 will make them appear just below the trigger control. To start the week on Monday, just amend the startAt variable at the beginning of the javascript file. Assigning a value of 0 will start the week on Sunday, and 1 will start the week on Monday. To show week numbers as well (for compliance to ISO-8601 standard), change the showWeekNumber variable to 1. [ new ] To hide today's date, change the showToday variable to 0. [ new ] An example to translate into another language : (extracted from Mr. Ralph Schaer's email to me :P) [ new ] To specify a image path for the required images, set imgDir variable to contain the string of the path. Defining Holidays To insert a holiday, use the following javascript function : addHoliday (date, month, year, description) If the year is set to 0 (zero), all the years with that date will be defined as a holiday. For example, addHoliday(25,12,0, "Christmas Day") Compatibility Only tested with IE6 and Netscape 6. Guarantee won't work in Opera, Netscape 4 and IE for Macintosh. Perhaps some kind soul would like to fix this issue for me :) Disclaimer The author will not assume any responsibilities including damages resulting from either proper or improper usage of the script. Hence, use it at your own risk. Bug reports are welcomed, however the author reserve the rights to decide whether to fix them or not (due to having other commitments). In the event the bug cannot be resolved by the author, no responsibilities must be assumed. */ // written by Tan Ling Wee on 2 Dec 2001 // last updated 23 June 2002 // email : fuushikaden@yahoo.com var fixedX = -1 // x position (-1 if to appear below control) var fixedY = -1 // y position (-1 if to appear below control) var startAt = 1 // 0 - sunday ; 1 - monday var showWeekNumber = 1 // 0 - don't show; 1 - show var showToday = 1 // 0 - don't show; 1 - show var imgDir = "/admin/taewoong_util/popcalendar/" // directory for images ... e.g. var imgDir="/img/" var gotoString = "Go To Current Month" var todayString = "Today is" var weekString = "Wk" var scrollLeftMessage = "Click to scroll to previous month. Hold mouse button to scroll automatically." var scrollRightMessage = "Click to scroll to next month. Hold mouse button to scroll automatically." var selectMonthMessage = "Click to select a month." var selectYearMessage = "Click to select a year." var selectDateMessage = "Select [date] as date." // do not replace [date], it will be replaced by date. var crossobj, crossMonthObj, crossYearObj, monthSelected, yearSelected, dateSelected, omonthSelected, oyearSelected, odateSelected, monthConstructed, yearConstructed, intervalID1, intervalID2, timeoutID1, timeoutID2, ctlToPlaceValue, ctlNow, dateFormat, nStartingYear var bPageLoaded=false var ie=document.all var dom=document.getElementById var ns4=document.layers var today = new Date() var dateNow = today.getDate() var monthNow = today.getMonth() var yearNow = today.getYear() var imgsrc = new Array("drop1.gif","drop2.gif","left1.gif","left2.gif","right1.gif","right2.gif") var img = new Array() var bShow = false; /* hides and objects (for IE only) */ function showElement( elmID ) { if( ie ) { for( i = 0; i < document.all.tags( elmID ).length; i++ ) { obj = document.all.tags( elmID )[i]; if( !obj || !obj.offsetParent ) { continue; } obj.style.visibility = ""; } } } function HolidayRec (d, m, y, desc) { this.d = d this.m = m this.y = y this.desc = desc } var HolidaysCounter = 0 var Holidays = new Array() function addHoliday (d, m, y, desc) { Holidays[HolidaysCounter++] = new HolidayRec ( d, m, y, desc ) } if (dom) { for (i=0;i