|
IntroductionAfter 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 # 1This 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 # 2The 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 UseUsage is very simple. Firstly, you will need to include a javascript library at the top of your html file like this ...<script language='javascript' src='popcalendar.js'></script>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/yyyyThe acceptable tokens are :- d - dateThe 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 : <script language="JavaScript">(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") Bug Fixes & Enhancements28 Mar 2002- At last, one kind soul helped me solve the layers over <SELECT> tags and applets! [ Thanks to Mr. Auke van Leeuwen for writing the code for me :) ] 14 Feb 2002 - Fixed bug where '31 Mar 2002' does not appear in some countries. [ Thanks to Mr. Håkan Nilsson for helping me test the fix :) ] 15 Jan 2002 - Allow images to be stored in other path. [ Thanks to Mr. Patrick Hanson and Mr. Christian Krzywicki for their suggestions :) ] 14 Jan 2002 - Inserted a demonstration on how to create a popup window effect of it instead of using layers. [ Thanks to Mr. Dmitry Tysh for implementing and sharing the demo :) ] - Allow '.' as date separator, ease language conversion, allow hiding of today's date and show date when the mouse hover over the dates. [ Thanks to Mr. Ralph Schaer for his suggestions and codes :) ] 12 Jan 2002 - Renamed popcalendar2.js (w/holidays definition) to replace popcalendar.js so I just have to maintain only one code from now on :P - Implemented ISO-8601 style calendar (I'm not sure if there is a standard style, but I've just added a week number). [ Thanks to Mr. Mikkel Nielsen for his suggestion :) ] - Fixed bug for wrong display of week number. [ Thanks to Mr. Mikkel Nielsen for pointing out :) ] 10 Jan 2002 - fixed bug where today's day name is wrongly displayed if the week starts on Monday. [ Thanks to Mr. Per Kåre Johnsen for pointing out to me :) ] 8 Jan 2002 - fixed bug where Mondays will be shaded instead of Sundays if week is starting on Monday. [ Thanks to Mr. Patrik Adolfsson for pointing out and helping to fix it :) ] 6 Jan 2002 - support latin calendar format where the week starts on Monday. [ Thanks to Mr Jean for his suggestion :) ] - fixed a bug where Sundays are supposed to be gray :P 26 Dec 2001 - fixed a bug where after August or September is selected, showing the calendar again will cause the month's name to be "undefined". [ Thanks to Mr. Nanda Kumar for reporting this bug :) ] 15 Dec 2001 - created "popcalendar2.js", which support holiday definition. 14 Dec 2001 - support ISO date format (yyyy-mm-dd). [ Thanks to Mr. Carl Sziebert's suggestion :) ] - allowed fixed x and y coordinates [ Thanks to Ms Nicole's suggestion :) ] 12 Dec 2001 - inaccurate positioning of calendar when the trigger is placed in a table in IE. CompatibilityOnly 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 :)DisclaimerThe 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. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
