2002-02-16: First public version released
2002-02-19: Added a month popup selector

## 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