Bootstrap Datepicker Demo

by Sahil Kashyap

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<input type="text" placehoder="Start Date" id="start_date"/>
<input type="text" placehoder="End Date" id="end_date"/>

CSS

.bg-primary a {
	color: #fff;	
}

JavaScript

$(document).ready(function(){
var myDate = new Date();
$("#start_date").datepicker({
   format: 'dd-mm-yyyy',
   todayBtn:  1,
    startDate: new Date(myDate.getTime() - 2 * 24 * 60 * 60 * 1000)  ,
   autoclose: true,
}).on('changeDate', function (selected) {
   var minDate = new Date(selected.date.valueOf());
   $('#end_date').datepicker('setStartDate', minDate);
});

$("#end_date").datepicker({
   todayBtn:  1,
   format: 'dd-mm-yyyy',
   autoclose: true,}) ;

});