Extended DateTimePicker (jQuery Plugin)

A modern, responsive, and internationalizable date and time picker plugin built for jQuery and optimized for Bootstrap 5. Designed to be highly customizable, featuring support for date ranges, multiple selection, birthday mode, advanced date blocking rules, layout control, and 12-hour or 24-hour time format support.

🔗 Live Demo

You can test the plugin live here: View Interactive Demo

---

🚀 Features

• Date Selection Modes: single, range, multiple, and birthday.
• Flexible Layouts (layout): Supports both vertical and horizontal orientations to fit seamlessly into different UI designs.
• Dual Month View (doubleMonth): Displays two consecutive months to streamline range selection.
• Integrated Clock & Range Times: Intuitive hour and minute selection with support for 12-hour (with AM/PM) or 24-hour military format (format24h), including individual time selection for start and end dates when using the range mode.
• Responsive Adaptability: Automatic fluid scaling and layout wrapping on mobile devices and narrow containers.
• Fine-Grained Date Control: Support for date limits (minDate, maxDate), weekend blocking (disableWeekends), specific date disabling (disabledDates), and default time initialization (defaultTime).
• Internationalization (i18n): Built-in support for multiple languages, with the ability to pass custom translation objects.
• Format Support: Reusable internal formatter (YYYY-MM-DD, DD/MM/YYYY, etc.).
• Clean Behavior: Automatic close when clicking outside the control and robust support for API calls (open, close, destroy).

---

📦 Installation

Ensure you include the required dependencies in your project first (jQuery and Bootstrap 5 CSS):

<!-- Bootstrap 5 CSS -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
/>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

Import the compiled plugin and its styles into your JavaScript entry point/bundle:

<link
  rel="stylesheet"
  href="./path/to/jquery.extended.datetimepicker.min.css"
/>;
<script src="./path/to/jquery.extended.datetimepicker.min.js"></script>

If you prefer the CDN version, you can use the following links:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/PinedaMB/extended_datetimepicker@latest/dist/jquery.extended.datetimepicker.min.css"
/>
<script src="https://cdn.jsdelivr.net/gh/PinedaMB/extended_datetimepicker@latest/dist/jquery.extended.datetimepicker.min.js"></script>

---

💡 Basic Usage

1. Target Element (Input)

<input
  type="text"
  id="my-datepicker"
  class="form-control"
  placeholder="Select a date"
/>

2. Initialization

$("#my-datepicker").extendedDateTimePicker({
  mode: "single",
  layout: "vertical",
  showClock: true,
  showCalendar: true,
  themeColor: "primary",
  format24h: true,
  defaultTime: "14:30",
  lang: "es",
});

---

⚙️ Configurable Options Table

Option	Type	Default	Description / Allowed Values
mode	string	'single'	Selection mode: 'single', 'range', 'multiple', or 'birthday'.
layout	string	'vertical'	Panel orientation: 'vertical' or 'horizontal'.
showCalendar	boolean	true	Shows or hides the calendar section.
showClock	boolean	true	Shows or hides the clock section.
themeColor	string	'success'	Bootstrap color theme (e.g., 'primary', 'success', 'danger').
format24h	boolean	true	If true, uses 0–23 hour format; if false, uses 12-hour format with AM/PM toggle.
defaultTime	string/array	null	Initial default time in 24h format ('HH:mm' for single, or ['HH:mm', 'HH:mm'] for range).
minDate	string/null	null	Minimum selectable date in ISO format ('YYYY-MM-DD').
maxDate	string/null	null	Maximum selectable date in ISO format ('YYYY-MM-DD').
disableWeekends	boolean	false	Disables Saturday and Sunday selection when set to true.
disabledDates	array	[]	List of specific dates to block, e.g., ['2026-08-15', '2026-08-20'].
doubleMonth	boolean	false	Renders two consecutive months side-by-side.
dateFormat	string	'YYYY-MM-DD'	Output format for the input field (e.g., 'DD/MM/YYYY').
lang	string/object	'es'	Language code ('es', 'en') or a custom i18n translation object.
selectedDates	array	[]	List of initial pre-selected dates.

---

🔄 Callbacks / Events

$("#my-datepicker").extendedDateTimePicker({
  onOpen: function () {
    console.log("Picker opened");
  },
  onClose: function () {
    console.log("Picker closed");
  },
  onSelectDate: function (dateObj, formattedDates) {
    console.log("Date Object:", dateObj);
    console.log("Formatted Dates:", formattedDates);
  },
  onSelectTime: function (timeState) {
    console.log("Selected Time:", timeState); // Returns an object for single mode, or an array of objects [{hour, minute, ampm}, {hour, minute, ampm}] for range mode
  },
});

---

🛠️ Public Methods (API)

You can manually trigger actions or clean up via instance methods:

// Open manually
$("#my-datepicker").extendedDateTimePicker("open");

// Close manually
$("#my-datepicker").extendedDateTimePicker("close");

// Destroy instance and remove event listeners
$("#my-datepicker").extendedDateTimePicker("destroy");

---

🎂 Birthday Mode (birthday)

The birthday mode replaces the traditional calendar view with direct numeric selectors for day, month, and year, making it fast and easy to pick distant birth dates:

$("#birthday-input").extendedDateTimePicker({
  mode: "birthday",
  showClock: false,
  dateFormat: "DD/MM/YYYY",
});

---

🌍 Language Customization (i18n)

You can pass a custom translation object directly into the lang option to support additional languages:

$("#my-datepicker").extendedDateTimePicker({
  lang: {
    calendar: {
      months: [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December",
      ],
      monthsShort: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec",
      ],
      daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
      rangeSeparator: "to",
    },
    clock: {
      title: "Clock",
      hour: "Hour",
      minute: "Minute",
      ampm: "AM / PM",
      start: "Start Time",
      end: "End Time",
    },
    birthday: {
      title: "Date of Birth",
      day: "Day",
      month: "Month",
      year: "Year",
    },
    actions: { today: "Today", now: "Now", clear: "Clear" },
  },
});

---

🔄 Changelog & Recent Updates

• Dual-Time Range Selection: Added support for independent hour and minute selection for both start and end dates when using the range selection mode.

• Dynamic Footer Action Buttons (actions): Introduced a configurable action footer allowing developers to explicitly define which control buttons appear and in what order (e.g., ['close', 'today', 'now', 'clear']).

• Dedicated Close Action (close): Added a fully internationalized close action button that instantly hides the picker dropdown upon click.

• Default Time Initialization (defaultTime): Enabled pre-setting initial times using standard 24h string formats ('HH:mm') for single instances or arrays (['HH:mm', 'HH:mm']) for range instances.

• Layout Grid Stability: Fixed calendar grid height shifts during month navigation by enforcing consistent CSS row structures.

Updated up to 3rd September 2026.

---

👤 Author & Credits

Created and maintained by Brayan Pineda Méndez / PinedaMB.

---

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.