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.

Change notifications

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;

Working with the Date Picker

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.


Author: Erik Arvidsson