jQuery Plugins › jQuery Time & Clock Plugins › Extended DateTimePicker

Extended Date and Time Picker jQuery Plugin for Bootstrap 5

File Size:	92.8 KB
Views Total:	0
Last Update:	08/11/2026 10:22:00 UTC
Publish Date:	08/11/2026 10:23:19 UTC
Official Website:	Go to website
License:	MIT

Demo Download

Features:

Single dates, ranges, multiple dates, and birthday entry.
Combines calendar and clock controls in one picker.
Displays one or two months for different date selection workflows.
Blocks weekends, individual dates, and dates outside defined limits.
Switches between 24-hour time and 12-hour time with AM/PM.
Vertical and horizontal picker layouts.
Formats selected dates for direct form submission.
Supports English, Spanish, and custom translations.
Adapts popup placement to narrow screens and nearby viewport edges.
Closes input-based pickers after an outside click.

How to use it:

1. Load Bootstrap 5 CSS, jQuery library, and the plugin's files in the document.

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

<!-- Extended DateTimePicker CSS -->
<link
  rel="stylesheet"
  href="/path/to//dist/jquery.extended.datetimepicker.min.css"
>

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

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

2. Create a text input for the selected date and time:

<div class="mb-3">
  <label for="meetingDate" class="form-label">Meeting date</label>
  <input
    type="text"
    id="meetingDate"
    class="form-control"
    placeholder="Choose a date and time"
  >
</div>

3. Initialize the jQuery date and time picker.

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

4. All configuration options and callback functions to customize the plugin:

mode (String): Sets date selection to 'single', 'range', 'multiple', or 'birthday'. Default: 'single'.
layout (String): Sets 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): Sets the Bootstrap color suffix used for selected dates and related states. Default: 'success'.
format24h (Boolean): Uses 0 through 23 hours when true and 12-hour time with AM/PM when false. Default: true.
selectedDates (Array): Supplies initial selections as ISO date strings. Default: [].
minDate (String | null): Sets the earliest selectable calendar date in YYYY-MM-DD format. Default: null.
maxDate (String | null): Sets the latest selectable calendar date in YYYY-MM-DD format. Default: null.
disableWeekends (Boolean): Blocks Saturday and Sunday in calendar mode. Default: false.
disabledDates (Array): Blocks specific calendar dates supplied as YYYY-MM-DD strings. Default: [].
doubleMonth (Boolean): Displays the active month and the following month together. Default: false.
dateFormat (String): Sets the date string written to the input. The formatter recognizes YYYY, YY, MM, M, DD, and D. Default: 'YYYY-MM-DD'.
lang (String | Object): Uses 'es', 'en', or a custom translation object for calendar, clock, birthday, and action labels. Default: 'es'.
onOpen (Function): Runs after an input-based picker opens. The callback context points to the target input. Default: empty function.
onClose (Function): Runs after an input-based picker closes. The callback context points to the target input. Default: empty function.
onSelectDate (Function | null): Runs after a date selection changes. Single and birthday modes pass one Date object. Range and multiple modes pass an array of Date objects. The second argument contains formatted date strings. Default: null.
onSelectTime (Function | null): Runs after the time state changes. The callback receives hour and minute, plus ampm in 12-hour mode. Default: null.

$("#meetingDate").extendedDateTimePicker({
  mode: 'single',
  layout: '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: function () { },
  onClose: function () { },
  onSelectDate: null,
  onSelectTime: null
});

5. API methods:

// Open the picker attached to an input.
$("#meetingDate").extendedDateTimePicker("open");

// Close the picker attached to an input.
$("#meetingDate").extendedDateTimePicker("close");

// Remove the picker, event handlers, wrapper, and stored instance.
$("#meetingDate").extendedDateTimePicker("destroy");

Advanced Examples

Appointment Form with Date and Time

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

    <input
      type="text"
      id="appointmentDate"
      name="appointment"
      class="form-control"
      placeholder="Select appointment date"
    >
  </div>

  <button type="submit" class="btn btn-primary">
    Save Appointment
  </button>
</form>

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

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

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

Booking Date Range with Two Months

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

  <input
    type="text"
    id="stayDates"
    class="form-control"
    placeholder="Select check-in and check-out"
  >

  <input type="hidden" id="checkIn" name="check_in">
  <input type="hidden" id="checkOut" name="check_out">
</div>

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

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

Load Disabled Dates from an AJAX Endpoint

Assume the endpoint returns this JSON structure:

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

Add the target input:

<input
  type="text"
  id="serviceDate"
  class="form-control"
  placeholder="Choose an available service date"
>

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

$(function () {
  $.getJSON("/api/blocked-dates", function (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 birth</label>

  <input
    type="text"
    id="birthDate"
    name="birth_date"
    class="form-control"
    placeholder="Choose your date of birth"
  >
</div>

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

Alternatives and Related Resources:

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

Prev: Clock Dial Time Picker for Bootstrap - jQuery bsTimepicker
Next: None