Modern Bootstrap Date Picker With jQuery And Day.js

A fast, customizable, and modern-looking date picker component for Bootstrap 4 framework, built with jQuery and Day.js.

Features:

• Custom date fomart.
• Allows you to specify min/max dates.
• Year & Month selector.
• Auto disables the date picker on mobile.
• Based on Bootstrap's Popover component.

How to use it:

1. Load the necessary jQuery library, Day.js, Bootstrap framework, and Font Awesome iconic font in the document.

<!-- 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 done.

<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 (also called start/end dates) using either input's min/max attributes.

<input type="text" id="example" class="form-control" min="2000-01-01" max="2025-12-31" name="example" />

// OR via JavaScript
jQuery('#example').datepicker({
  minDate: '1900-01-01',
  maxDate: null,
});

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 component when the screen width is smaller than this value:

jQuery('#example').datepicker({
  minScreenWidth: 576
});

Changelog:

2022-11-28

• Bugfix

2022-07-25

• Trigger date picker on mobile

2022-07-22

• Process options for ipad/iphone usage

2022-03-30

• Fix to re-trigger change event if date is cleared out due to being outside max/min range

2021-12-02

• Move lines around to avoid re-initializing same input field twice

2021-11-06

• Adjust padding for month dropdown to avoid shifting navigation buttons

2021-10-26

• Adjust padding to account for bold drop down toggles

2021-10-23

• Use strict

---

This awesome jQuery plugin is developed by lesilent. For more Advanced Usages, please check the demo page or visit the official website.