datepicker-bs4 is a fast, customizable, and modern-looking date picker component of the Bootstrap 4 framework, built with jQuery and Day.js.
bootstrap datepicker, bootstrap 4 datepicker, bootstrap 3 datepicker, bootstrap date range picker, best datepicker for bootstrap 4, responsive datetimepicker bootstrap
Features:
- Custom date format.
- Allows you to set minimum/maximum dates.
- Determined year and month.
- It automatically disables the date picker on mobile.
- Based on the Popover component in Bootstrap.
How to make use of it:
1. Load the mandatory jQuery library, Day.js, Bootstrap framework, and Font Awesome iconic font within the doc.
<!-- Bootstrap + jQuery --> <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/cdn/bootstrap.min.js"></script> <!-- Font Awesome --> <link rel="stylesheet" href="/path/to/cdn/fontawesome.min.css" /> <!-- Day.js --> <script src="/path/to/cdn/dayjs.min.js"></script>
2. Download and load the datepicker-bs4.js
script after jQuery.
<script src="js/datepicker-bs4.js" defer="defer"></script>
3. Initialize the plugin on the date picker input and achieved.
<input type="text" id="example" class="form-control" name="example" />
document.addEventListener('DOMContentLoaded', function () { jQuery('#example').datepicker({ // options here }); });
4. Set the min/max dates utilizing both input’s min/max attributes.
<input type="text" id="example" class="form-control" min="2000-01-01" max="2025-12-31" name="example" />
5. Customize the date format.
jQuery('#example').datepicker({ format: 'MM/DD/YYYY', });
6. Set the width of the date picker popover.
jQuery('#example').datepicker({ popoverWidth: '19rem', });
7. Auto-disable the date picker part when the display width is smaller than this value:
jQuery('#example').datepicker({ minScreenWidth: 576 });
Modern Bootstrap Date Picker With jQuery And Day.js, datepicker-bs4 Plugin/Github
See Demo And Download
Official Website(lesilent): Click Here
This superior jQuery/javascript plugin is developed by lesilent. For extra Advanced Usages, please go to the official website.
Be First to Comment