Modern Bootstrap Date Picker With jQuery And Day.js

Modern Bootstrap Date Picker With jQuery And Day.js
File Size: 13.9 KB
Views Total: 3285
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.


  • 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 () {
    // 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
  minDate: '1900-01-01',
  maxDate: null,

5. Customize the date format.

  format: 'MM/DD/YYYY',

6. Set the width of the date picker popover.

  popoverWidth: '19rem',

7. Auto-disable the date picker component when the screen width is smaller than this value:

  minScreenWidth: 576



  • Trigger date picker on mobile


  • Process options for ipad/iphone usage


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


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


  • Adjust padding for month dropdown to avoid shifting navigation buttons


  • Adjust padding to account for bold drop down toggles


  • Use strict

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