Datepicker for Bootstrap bootstrap-datepicker.js - original idea from Stefan Petre

Contrary to the Stefan's one, this version works with IE7+ and from Bootstrap v2.0.2.

Also added:

  • When the field is empty, the selection is done on the current date (instead of 1/1/1970)
  • When you use tab from fields to fields, then no value is selected by default into the field date

About

Add datepicker picker to field or to any other element.

  • can be used as a component
  • formats: dd, d, mm, m, yyyy, yy
  • separators: -, /, .

Download

Example

Attached to a field with the format specified via options.

Attachet to a field with the format specified via data tag.

As component.

Attached to other elment then field and using events to work with the date values.

Oh snap!
Start dateChange End dateChange
2012-02-20 2012-02-25

Using bootstrap-datepicker.js

Call the datepicker via javascript:

$('.datepicker').datepicker()

Options

Name type default description
format string 'mm/dd/yyyy' the date format, combination of d, dd, m, mm, yy, yyy.
weekStart integer 0 day of the week start. 0 for Sunday - 6 for Saturday

Markup

Format a component.

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

Methods

.datepicker(options)

Initializes an datepicker.

Other calls

Action description
destroy Remove the Datepicker from the element 
$('.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. 
$('#dp5').datepicker()
  .on('changeDate', function(ev){
    if (ev.date.valueOf() < startDate.valueOf()){
      ....
    }
  });
Fork me on GitHub