Datepicker for Bootstrap bootstrap-datepicker.js

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

Change log

12/3/2013

Fixed bug where date selection from previous and next year was wrong

Fixed bug where a variable was polluting the namespace

10/3/2013

Changed so the value will not be set unless the user chooses a date

16/2/2013

Fixed it to work with Boostrap version 2.3.0 and jQuery 1.9.1

Added a new callback, 'onRender' to decorate or disabled specific dates

Added the option to disable specific dates

Fixed some bugs in the parser

Fixed some bugs in the formater

29/9/2012

Fixed it to work with Boostrap version 2.1.1 and jQuery 1.8.1

Fixed current date highlight

Added the option to set the `viewMode` via data attribute

Added a new option: 'minViewMode'

Changed the navigation images to HTML entities

Fixed the parsing date

Exposed a new method 'setDate'

Adde a new property to the 'changeDate' event: 'viewMode'

Fixed transition from month to month, when the next month has less days then the previous

Example

Attached to a field with the format specified via options.

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

As component.

Start with years viewMode.

Limit the view mode to months

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

Disabling dates in the past and dependent disabling.

var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

var checkin = $('#dpd1').datepicker({
  onRender: function(date) {
    return date.valueOf() < now.valueOf() ? 'disabled' : '';
  }
}).on('changeDate', function(ev) {
  if (ev.date.valueOf() > checkout.date.valueOf()) {
    var newDate = new Date(ev.date)
    newDate.setDate(newDate.getDate() + 1);
    checkout.setValue(newDate);
  }
  checkin.hide();
  $('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').datepicker({
  onRender: function(date) {
    return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
  }
}).on('changeDate', function(ev) {
  checkout.hide();
}).data('datepicker');

---

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
viewMode	string|integer	0 = 'days'	set the start view mode. Accepts: 'days', 'months', 'years', 0 for days, 1 for months and 2 for years
minViewMode	string|integer	0 = 'days'	set a limit for view mode. Accepts: 'days', 'months', 'years', 0 for days, 1 for months and 2 for years

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.

.datepicker('show')

Show the datepicker.

.datepicker('hide')

Hide the datepicker.

.datepicker('place')

Updates the date picker's position relative to the element

.datepicker('setValue', value)

Set a new value for the datepicker. It cand be a string in the specified format or a Date object.

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.
onRender	This event is fired when a day is rendered inside the datepicker. Should return a string. Return 'disabled' to disable the day from being selected.

$('#dp5').datepicker()
  .on('changeDate', function(ev){
    if (ev.date.valueOf() < startDate.valueOf()){
      ....
    }
  });