Usage

Via Markup

<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
  <input class="span2" size="16" type="text" value="12-02-2012">
  <span class="add-on"><i class="icon-th"></i></span>
</div>

Via Javascript

query('.datepicker').datepicker(options)

Options

Name Type Default Description
format string 'mm/dd/yyyy' the date format, combination of d, dd, m, mm, yy, yyy and separators: -, /, .
weekStart integer 0 day of the week start. 0 for Sunday - 6 for Saturday

Methods

Method Description
hide Hides the Datepicker.
show Shows the Datepicker.
destroy Remove the Datepicker from the element
query('.datepicker').datepicker("destroy")

Events

Datepicker class exposes a few events for manipulating the dates.

Event Description
show This event fires immediately when the date picker is displayed.
hide This event is fired immediately when the date picker is hidden.
changeDate This event is fired when the date is changed.
query('#dp5').datepicker()
    .on('changeDate', function(ev){
        if (ev.date.valueOf() < startDate.valueOf()){
            ....
        }
    });

Examples

Attached to a field with the format specified via options. (default format: mm-dd-yyyy)

Attachet to a field with the format specified via data tag. (mm/dd/yy)

As component. (dd-mm-yyyy)

Attached to other element then field and using events to work with the date values. (yyyy-mm-dd)

Oh snap!
Start date
Change
End date
Change
2012-02-20 2012-02-25