Here i have explained how to create Bootstap datepicker (Calander) to a form.

Step1: copy the following HTML Markup and paste it inside body tag.

HTML Markup

<input type="text" class="form-control" placeholder="DD/MM/YYYY" id="cal1">

Step2: Attach the following CSS files inside head tag.

CSS

 <!-- CSS files --> 
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">

Step3: Attach the following Javascript files inside head tag.

Javascript

<!-- Javascript files -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap-datepicker.js"></script>

Step4: copy the following Javascript function and paste it inside head tag.

Javascript

$(function(){
  
      $('#cal1').datepicker({    
	  /* disable past dates*/
	   startDate: new Date(),
	   
	   /* dateformat*/
	    format: 'mm-dd-yyyy',      	   
        autoclose: true
    });		
});

Screenshot

Add Comments