2002-02-16: First public version released
2002-02-19: Added a month popup selector
This date picker was designed to be a very flexible date picker that would both allow American week format, Arabian week format as well as any other international date formats. This means that the week can start at any day of the week and that any day can be marked red to mark it as beeing a sabbath day or whatever is the custom your users call it.
The date picker is also designed to be easy to include in your page and it is designed to be DOM level 1 compliant. This means that it works in IE5+, Mozilla and it should work in all the other DOM1 borwsers such as IE5 Mac and Konqueror but it is yet to be verified.
To use the date picker two files should be included in your page. These are the css and js files describing the look and the logic of the date picker.
<link type="text/css" rel="StyleSheet" href="css/datepicker.css" /> <script type="text/javascript" src="js/datepicker.js"></script>
The date picker is represented by a JavaScript object instantiated
from the DatePicker constructor. The date picker constructor
has one optional argument that is a js Date object.
This object represents the date to select. If no argument is provided
today's date is used and if the argument is null no date is selected.
var dp1 = new DatePicker(); var birthDate = new Date( 1975, 7, 19 ); var dp2 = new DatePicker( birthDate ); var dp3 = new DatePicker( null );
This just creates a js object representing the date picker. To create
the actual user interface for the date picker the create
method should be called. This method returns an HTMLElement
object that can be inserted into the actual page. The create
method has one optional argument that is the document to create the elements
in. This can be useful if one needs to create the user interface for the
date picker in another document (for example a popup window).
var dp1 = new DatePicker(); var el = dp1.create(); document.body.appendChild( el );
Notice that if you call create more than once the old user interface will not be removed but it will not work correctly any more.
To be notified when the selected date changes inside the date picker
one listens to the pseudo-event onchange. This is actually
a method on the DatePicker class but you can override this
to execute your own code.
// assign onchange a new funtion
dp1.onchange = function () {
window.status = dp1.getDate();
};
// or point onchange to an already existing function
dp2.onchange = datePicker2Changed;
All methods listed in the API page can be used at any time. The UI will reflect your changes immediately if there is an element representing the UI, if there isn't, the changes will still be applied and once the UI is created it will reflect the state of the date picker.
There is one more thing to point out about the date picker and that
is the use of the value null for the date property. When
the date is set to null the date picker is set into a state
where no date is selected.