A quick, customizable, and modern-looking date picker part for Bootstrap 4 framework, constructed with jQuery and Day.js.
Options:
- Customized date fomart.
- Lets you specify min/max dates.
- 12 months & Month selector.
- Auto disables the date picker on cell.
- Based mostly on Bootstrap’s Popover part.
The best way to use it:
1. Load the required jQuery library, Day.js, Bootstrap framework, and Font Superior iconic font within the doc.
<!-- Bootstrap + jQuery --> <hyperlink 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 Superior --> <hyperlink rel="stylesheet" href="/path/to/cdn/fontawesome.min.css" /> <!-- Day.js --> <script src="/path/to/cdn/dayjs.min.js"></script>
2. Obtain and cargo the datepicker-bs4.js script after jQuery.
<script src="js/datepicker-bs4.js" defer="defer"></script>
3. Initialize the plugin on the date picker enter and finished.
<enter kind="textual content" id="instance" class="form-control" identify="instance" />
doc.addEventListener('DOMContentLoaded', operate () {
jQuery('#instance').datepicker({
// choices right here
});
});
4. Set the min/max dates (additionally known as begin/finish dates) utilizing both enter’s min/max attributes.
<enter kind="textual content" id="instance" class="form-control" min="2000-01-01" max="2025-12-31" identify="instance" />
// OR by way of JavaScript
jQuery('#instance').datepicker({
minDate: '1900-01-01',
maxDate: null,
});
5. Customise the date format.
jQuery('#instance').datepicker({
format: 'MM/DD/YYYY',
});
6. Set the width of the date picker popover.
jQuery('#instance').datepicker({
popoverWidth: '19rem',
});
Changelog:
2023-09-06
- Change to utilizing let and const
2023-08-26
- Take away minScreenWidth choice in order that it may be dealt with by the person as a substitute
2023-05-30
2022-11-28
2022-07-25
- Set off date picker on cell
2022-07-22
- Course of choices for ipad/iphone utilization
2022-03-30
- Repair to re-trigger change occasion if date is cleared out resulting from being exterior max/min vary
2021-12-02
- Transfer strains round to keep away from re-initializing identical enter subject twice
2021-11-06
- Modify padding for month dropdown to keep away from shifting navigation buttons
2021-10-26
- Modify padding to account for daring drop down toggles
2021-10-23
This superior jQuery plugin is developed by lesilent. For extra Superior Usages, please examine the demo web page or go to the official web site.
