Modern Bootstrap Date Picker With jQuery And Day.js

Modern Bootstrap Date Picker With jQuery And Day.js
File Size: 13.6 KB
Views Total: 754
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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" />

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:

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.