Tuesday, June 25, 2024
HomejQueryTrendy Bootstrap Date Picker With jQuery And Day.js

Trendy Bootstrap Date Picker With jQuery And Day.js


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.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments