Last Updated on July 16, 2021 by Roshan Parihar
In this tutorial, learn how to add datepicker to input field using Bootstrap. The short answer is to use the datepicker() function with ‘bootstrap-datepicker.js‘ library of JS to create a input box with the date picker. The input box if contains the date picker will display the date picker when the user clicks on it.
The date picker adds the date picker to the input box which contains days, month and year to select. When you select the date from the date picker, it adds the selected date to the input box.
So, let’s start creating a date picker input box using Bootstrap with the below methods.
Add Datepicker To Input Field With Bootstrap
You have to use the Bootstrap library ‘bootstrap-datepicker.js‘ to add the date picker to the input box. In addition to this, you also have to use the datepicker() function as given in the example below.
You can change the format of the date you want to get input from the users. Create your own input box with date picker using the below example.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script> <script> $(function(){ $('.datepicker').datepicker({ format: 'mm-dd-yyyy' }); }); </script> <div class="col-md-6"> <input type="text" class="form-control datepicker" placeholder="Select Date"/> </div> |
The above example contains the input box. You have to check the live demo and click the above input box to see the date picker and select your date. The input box contains no icon to display it as a date picker input box.
Add Calendar Icon To Datepicker Textbox Using Bootstrap
By including the icon to the date picker textbox, you can make it different from other textboxes. You can use glyphicons or font awesome icons to add the calendar icon to the textbox. see the example below to add the icon to the input box.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(function(){ $('.date-withicon').datepicker({ format: 'mm-dd-yyyy' }); }); </script> <div class="col-md-6"> <div class="input-group date" data-provide="datepicker"> <input type="text" class="form-control date-withicon" placeholder="Select Date"/> <div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div> </div> </div> |
The above example contains the icons to the input box. You can change the icon with your chosen icons.
Live Example To Create Form With Datepicker
To explain the above example with all useful CSS and JS, you can check below live example. You can find out how to add the script of datepicker. See the below demo to check the input box containing the datepicker.
You can use the above live example to create your own date picker input box.
DOWNLOAD Free Bootstrap CHEAT SHEET
I hope you like this post on how to add datepicker to input box using Bootstrap.
Reference
Bootstrap Doc