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 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 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.


	  /* disable past dates*/
	   startDate: new Date(),
	   /* dateformat*/
	    format: 'mm-dd-yyyy',      	   
        autoclose: true


Add Comments