Licensed under the Apache Software License 2.0

This component may be obtained, modified and distributed free of charge for personal as well as commercial use. Please see the license for the complete terms and exact wording.

2002-02-16: First public version released
2002-02-19: Added a month popup selector
2006-05-28: Changed license to Apache Software License 2.0.

Introduction

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.

Usage

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>

Creation

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.

Date Picker
API
Demo
Download

Author: Erik Arvidsson