Prolonged Date and Time Picker jQuery Plugin for Bootstrap 5

Prolonged DateTimePicker is a jQuery plugin that provides a full-featured date and time picker to your Bootstrap 5 tasks. 

It helps single dates, date ranges, a number of dates, birthday entry, blocked dates, and 12-hour or 24-hour time enter. Best for reserving varieties, appointment screens, profile varieties, and admin schedules. 

Options:

• Single dates, ranges, a number of dates, and birthday entry.
• Combines calendar and clock controls in a single picker.
• Shows one or two months for various date choice workflows.
• Blocks weekends, particular person dates, and dates exterior outlined limits.
• Switches between 24-hour time and 12-hour time with AM/PM.
• Vertical and horizontal picker layouts.
• Codecs chosen dates for direct kind submission.
• Helps English, Spanish, and customized translations.
• Adapts popup placement to slender screens and close by viewport edges.
• Closes input-based pickers after an outdoor click on.

Easy methods to use it:

1. Load Bootstrap 5 CSS, jQuery library, and the plugin’s recordsdata within the doc.

<!-- Bootstrap 5 CSS -->
<hyperlink
  rel="stylesheet"
  href="/path/to/cdn/bootstrap.min.css"
>

<!-- Prolonged DateTimePicker CSS -->
<hyperlink
  rel="stylesheet"
  href="/path/to//dist/jquery.prolonged.datetimepicker.min.css"
>

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Prolonged DateTimePicker -->
<script src="/path/to/dist/jquery.prolonged.datetimepicker.min.js"></script>

2. Create a textual content enter for the chosen date and time:

<div class="mb-3">
  <label for="meetingDate" class="form-label">Assembly date</label>
  <enter
    sort="textual content"
    id="meetingDate"
    class="form-control"
    placeholder="Select a date and time"
  >
</div>

3. Initialize the jQuery date and time picker.

$(perform () {
  $("#meetingDate").extendedDateTimePicker({
    mode: "single",
    lang: "en",
    showCalendar: true,
    showClock: true,
    format24h: false
  });
});

4. All configuration choices and callback capabilities to customise the plugin:

• mode (String): Units date choice to 'single', 'vary', 'a number of', or 'birthday'. Default: 'single'.

• structure (String): Units the picker panel to 'vertical' or 'horizontal'. Default: 'vertical'.

• showCalendar (Boolean): Controls calendar visibility. Default: true.

• showClock (Boolean): Controls clock visibility. Default: true.

• themeColor (String): Units the Bootstrap colour suffix used for chosen dates and associated states. Default: 'success'.

• format24h (Boolean): Makes use of 0 by 23 hours when true and 12-hour time with AM/PM when false. Default: true.

• selectedDates (Array): Provides preliminary choices as ISO date strings. Default: [].

• minDate (String | null): Units the earliest selectable calendar date in YYYY-MM-DD format. Default: null.

• maxDate (String | null): Units the newest selectable calendar date in YYYY-MM-DD format. Default: null.

• disableWeekends (Boolean): Blocks Saturday and Sunday in calendar mode. Default: false.

• disabledDates (Array): Blocks particular calendar dates provided as YYYY-MM-DD strings. Default: [].

• doubleMonth (Boolean): Shows the energetic month and the next month collectively. Default: false.

• dateFormat (String): Units the date string written to the enter. The formatter acknowledges YYYY, YY, MM, M, DD, and D. Default: 'YYYY-MM-DD'.

• lang (String | Object): Makes use of 'es', 'en', or a customized translation object for calendar, clock, birthday, and motion labels. Default: 'es'.

• onOpen (Operate): Runs after an input-based picker opens. The callback context factors to the goal enter. Default: empty perform.

• onClose (Operate): Runs after an input-based picker closes. The callback context factors to the goal enter. Default: empty perform.

• onSelectDate (Operate | null): Runs after a date choice modifications. Single and birthday modes go one Date object. Vary and a number of modes go an array of Date objects. The second argument incorporates formatted date strings. Default: null.

• onSelectTime (Operate | null): Runs after the time state modifications. The callback receives hour and minute, plus ampm in 12-hour mode. Default: null.

$("#meetingDate").extendedDateTimePicker({
  mode: 'single',
  structure: 'vertical',
  showClock: true,
  showCalendar: true,
  themeColor: 'success',
  format24h: true,
  selectedDates: [],
  minDate: null,
  maxDate: null,
  disableWeekends: false,
  disabledDates: [],
  doubleMonth: false,
  dateFormat: 'YYYY-MM-DD',
  lang: 'es',
  onOpen: perform () { },
  onClose: perform () { },
  onSelectDate: null,
  onSelectTime: null
});

5. API strategies:

// Open the picker hooked up to an enter.
$("#meetingDate").extendedDateTimePicker("open");

// Shut the picker hooked up to an enter.
$("#meetingDate").extendedDateTimePicker("shut");

// Take away the picker, occasion handlers, wrapper, and saved occasion.
$("#meetingDate").extendedDateTimePicker("destroy");

Superior Examples

Appointment Kind with Date and Time

<kind id="appointmentForm">
  <div class="mb-3">
    <label for="appointmentDate" class="form-label">
      Appointment
    </label>

    <enter
      sort="textual content"
      id="appointmentDate"
      title="appointment"
      class="form-control"
      placeholder="Choose appointment date"
    >
  </div>

  <button sort="submit" class="btn btn-primary">
    Save Appointment
  </button>
</kind>

<script>
$(perform () {
  $("#appointmentDate").extendedDateTimePicker({
    mode: "single",
    lang: "en",
    showCalendar: true,
    showClock: true,
    format24h: true,
    dateFormat: "MM/DD/YYYY",
    disableWeekends: true,

    onSelectDate: perform (date, formattedDates) {
      console.log("Chosen date:", formattedDates[0]);
    },

    onSelectTime: perform (time) {
      console.log("Chosen time:", time.hour + ":" + time.minute);
    }
  });
});
</script>

Reserving Date Vary with Two Months

<div class="mb-3">
  <label for="stayDates" class="form-label">Keep dates</label>

  <enter
    sort="textual content"
    id="stayDates"
    class="form-control"
    placeholder="Choose check-in and check-out"
  >

  <enter sort="hidden" id="checkIn" title="check_in">
  <enter sort="hidden" id="checkOut" title="check_out">
</div>

<script>
$(perform () {
  $("#stayDates").extendedDateTimePicker({
    mode: "vary",
    lang: "en",
    structure: "horizontal",
    showClock: false,
    doubleMonth: true,
    minDate: "2026-09-01",
    maxDate: "2026-12-20",
    disabledDates: [
      "2026-10-12",
      "2026-11-05",
      "2026-11-06"
    ],

    onSelectDate: perform (dates, formattedDates) {
      if (formattedDates.size === 2) {
        $("#checkIn").val(formattedDates[0]);
        $("#checkOut").val(formattedDates[1]);
      }
    }
  });
});
</script>

Load Disabled Dates from an AJAX Endpoint

Assume the endpoint returns this JSON construction:

{
  "dates": [
    "2026-08-19",
    "2026-08-22",
    "2026-08-28"
  ]
}

Add the goal enter:

<enter
  sort="textual content"
  id="serviceDate"
  class="form-control"
  placeholder="Select an accessible service date"
>

Load the dates and initialize the picker after the request succeeds:

$(perform () {
  $.getJSON("/api/blocked-dates", perform (response) {
    var blockedDates = Array.isArray(response.dates)
      ? response.dates
- [];

    $("#serviceDate").extendedDateTimePicker({
      mode: "single",
      lang: "en",
      showClock: false,
      minDate: "2026-08-12",
      disabledDates: blockedDates
    });
  });
});

Birthday Picker

<div class="mb-3">
  <label for="birthDate" class="form-label">Date of beginning</label>

  <enter
    sort="textual content"
    id="birthDate"
    title="birth_date"
    class="form-control"
    placeholder="Select your date of beginning"
  >
</div>

<script>
$(perform () {
  $("#birthDate").extendedDateTimePicker({
    mode: "birthday",
    lang: "en",
    showClock: false,
    dateFormat: "MM/DD/YYYY"
  });
});
</script>

Options and Associated Sources:

This superior jQuery plugin is developed by PinedaMB. For extra Superior Usages, please verify the demo web page or go to the official web site.