bootstrap-datepicker demo

(source on Github)

Tip: This page logs bootstrap-datepicker events to your browser's console.

Options as an argument

// <input type="text" value="09-05-2014" class="form-control" id="datepicker1">

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

Options in data attributes

// <input type="text" class="form-control" id="datepicker2" data-week-start="1" data-format="m/d/yy">

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

Attached to element

Select your birthday 

// <a href="#" id="datepicker3">Select your birthday</a> <span id="datepicker3-target"></span>

var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
$('#datepicker3').datepicker().on('dateChanged.bs.datepicker', function(e) {
  $('#datepicker3-target').text(
    '(It seems unlikely that you were born on ' +
    months[e.date.getMonth()] + ' ' + e.date.getDate() + ', ' + e.date.getFullYear() +
    ', just ' + Math.floor((new Date().getTime() - e.date.getTime()) / 86400000) + ' days ago!)'
  );
});

Component

// <div class="input-group" id="datepicker4" data-format="yyyy-mm-dd">
//   <input type="text" value="1999-12-31" class="form-control" readonly="">
//   <span class="input-group-addon"><a href="#" class="glyphicon glyphicon-calendar"></a></span>
// </div>

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