A Date Picker for Bootstrap 4 With jQuery And Day.js

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
});

Options

OptionDefaultDescription
formatMM/DD/YYYYDate format usingĀ Dayjs format.
maxDatenullThe maximum allowed date is in YYYY-MM-DD format. This can also be specified using a “max” attribute on the input tag.
minDate1900-01-01The minimum allowed date is in YYYY-MM-DD format. This can also be specified using a “min” attribute on the input tag.
minScreenWidth576Minimum screen width where date picker is enabled.
popoverWidth19remWidth of the Bootstrap popover.

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 usage, please go to the official website.

Share