Datepicker for Bootstrap bootstrap-datepicker.js v 1.0

Basic usage

Call the datepicker via javascript:

$('#myInput').datepicker();

Options

Name type default description
format string 'mm/dd/yyyy' The date format, combination of d, dd, m, mm, yy, yyyy and separators -,/,.
weekStart integer 0 Day of the week start. 0 for Sunday - 6 for Saturday
autoClose boolean false If true, datepicker will close after date selection. If false, datepicker will be open until user click outside the datepicker.
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
onStart function '' This function is used when the datepicker is called. Should have a date as parameter and this parameter filled with date from input value or form group data tag.
onRender function '' This function is used when a day is rendered inside the datepicker. Should have a date as parameter. Should return a string, in fact the class name(s).
Return 'disabled' to disable the day from being selected.

Markup

Simple input.

<input type="text" class="form-control" value="12-01-2015" id="myInput" />

Or as input group.

<div class="input-group date" id="myInput">
    <input type="text" class="form-control" value="12/01/2015" />
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
Options for datepicker also could be included as data tags in the markup. Current (onload) date mentioned as data-date="01-01-1990". All over options starts with prefix data-date-, namely data-date-format, data-date-viewmode and data-date-minviewmode.

Methods

$().datepicker(options)

Initializes an datepicker.

$('#myInput').datepicker({
    format: 'dd-mm-yyyy'
});

.datepicker('show')

Show the datepicker.

$('#myInput').datepicker('show');

.datepicker('hide')

Hide the datepicker.

$('#myInput').datepicker('hide');

.datepicker('place')

Updates the date picker's position relative to the element

$('#myInput').datepicker('place');

.datepicker('setValue', value)

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

$('#myInput').datepicker('setValue', value);

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.

Examples

Attached to a field with the format specified via options.

<input type="text" class="form-control" value="12-01-2015" id="myInput" />
$('#myInput').datepicker({format: 'dd-mm-yyyy'});

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

<input type="text" class="form-control" value="12/01/2015" data-date-format="dd/mm/yy" id="myInput" />
$('#myInput').datepicker();

As input group.

<div class="input-group date" id="myInput" data-date="12-01-2015" data-date-format="dd-mm-yyyy">
    <input type="text" class="form-control" value="12-01-2015" />
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
$('#myInput').datepicker();

Start with years viewMode.

<div class="input-group date" id="myInput" data-date="12-01-2015" data-date-format="dd-mm-yyyy" data-date-viewmode="years">
    <input type="text" class="form-control" value="12-01-2015" />
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
$('#myInput').datepicker();

Limit the view mode to months.

<div class="input-group date" id="myInput" data-date="01/2015" data-date-format="mm/yyyy" data-date-viewmode="years" data-date-minviewmode="months">
    <input type="text" class="form-control" value="01/2015" />
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
$('#myInput').datepicker();

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

Something went wrong!
Start date Change
End date Change
20-01-2015
25-01-2015
<div class="row">
    <div class="col-md-12">
        <div class="alert alert-danger" id="alert">
            <strong>Something went wrong!</strong>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-3 text-center">
        <strong>Start date</strong> <a href="#" class="btn btn-info btn-sm" id="dp4" data-date-format="dd-mm-yyyy" data-date="20-01-2015">Change</a>
    </div>
    <div class="col-md-3 text-center">
        <strong>End date</strong> <a href="#" class="btn btn-info btn-sm" id="dp5" data-date-format="dd-mm-yyyy" data-date="25-01-2015">Change</a>
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        <div class="date-bg bg-success" id="startDate">20-01-2015</div>
    </div>
    <div class="col-md-3">
        <div class="date-bg bg-success" id="endDate">25-01-2015</div>
    </div>
</div>
var startDate;
var endDate;
$('#dp4').datepicker({
    onStart: function(obj){
        startDate =  obj;
    }
}).on('changeDate', function(ev){
    if (ev.date.getTime() > endDate.getTime()){
        $('#alert').show().find('strong').text('The start date can not be greater then the end date!');
    } else {
        $('#alert').hide();
        startDate = new Date(ev.date);
        $('#startDate').text($('#dp4').data('date'));
    }
    $(this).datepicker('hide');
});
$('#dp5').datepicker({
    onStart: function(obj){
        endDate =  obj;
    }
}).on('changeDate', function(ev){
    if (ev.date.getTime() < startDate.getTime()){
        $('#alert').show().find('strong').text('The end date can not be less then the start date!');
    } else {
        $('#alert').hide();
        endDate = new Date(ev.date);
        $('#endDate').text($('#dp5').data('date'));
    }
    $('#dp5').datepicker('hide');
});

Disabling dates in the past and dependent disabling.

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label for="dpd1">Check in:</label>
            <input type="text" class="form-control" value="" id="dpd1" />
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="dpd2">Check out:</label>
            <input type="text" class="form-control" value="" id="dpd2" />
        </div>
    </div>
</div>
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() {
    checkout.hide();
}).data('datepicker');