Here I am going to show you how to Integrate Simple Datepicker On Bootstrap Website with minimal code, For adding datepicker on your bootstrap based website you need to download and configure bootstrap-datepicker.js on your existing website. It is a simple datepicker plugin specially for bootstrap website.
Integrate Simple Datepicker On Bootstrap Website
Follow below simple steps to add datepicker feature on your bootstrap based website in few steps.
Libraries
Include data picker libraries along with bootstrap libraries on page, If you already added bootstrap on your website or your theme is bootstrap based then you don’t need to add bootstrap core libraries on page just add datepicker js+css datepicker.css, bootstrap-datepicker.js libraries on page.
<!--CSS--> <link href="datepicker.css" rel="stylesheet"> <!--JS--> <script src="bootstrap-datepicker.js"></script> |
HTML
In Below example i have created sample datepicker input box with some default parameter and format, you can set your own date format or default value as per your application need.
<div class="input-append datepicker" data-date="12-04-2017" data-date-format="dd-mm-yyyy"> <input type="text" value="12-04-2017" /> </div> |
JS
Finnaly call the datepicker function on page to add datepicker feature on your bootstrap website.
<script>
$(function() {
$('.datepicker').datepicker();
});
</script>
|
See live demo of jquery bootstrap datepicker and download source code.
