How to create Bootstrap Date Picker using Bootstrap

Avatar admin | December 15, 2018

The Bootstrap Datepicker is one of the most important parts of any website form to select date easily. To create a date picker you need to know  JavaScript or you can use simple HTML attribute like this –

<input type="date" name="StartDate">

but this is basic and design will be different on different browsers. It will show a result like this –

To get a consistent design for your Datepicker you can use Bootstrap Datepicker which is very easy. It has many options to customize the calendar according to the requirement. To use that the HTML code will be like this –



<div class="container">
   

<div class="hero-unit">
        <input type="text" placeholder="click to show datepicker" id="pickyDate"/>
    </div>


 </div>


JS Code

$(document).ready(function () {
      $('#pickyDate').datepicker({
           format: "dd/mm/yyyy"
      });
 });

The above code will not run until you add these resources in the header of your website –

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.12.2%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.6%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fbootstrap-datepicker%2F1.8.0%2Fjs%2Fbootstrap-datepicker.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

Here you can check a live working example of the code –


Written by admin


Comments

This post currently has 2 responses.

Comments are closed.


shares