10 Best Date Time Picker JavaScript Plugins with Examples (2026)

A JavaScript date picker helps you select dates, times, ranges, and calendar values inside forms and dashboards.

This guide compares the best date and time picker JavaScript libraries for jQuery, Bootstrap, vanilla JavaScript, web components, and calendar-heavy interfaces.

Originally Published Dec 04 2017, updated Dec 11 2025

Table of contents:

• Qucik Picks
• Best jQuery Date/Time Picker Plugins
• Best Vanilla JS Date/Time Picker Libraries
• How to Choose
• More Date Pickers for React & Vue

Quick Picks

Best jQuery Date/Time Picker Plugins:

Clean jQuery Date and Time Picker Plugin - datetimepicker

Best for: Projects that already run jQuery and need a well-tested inline date/time picker with input masking.

This plugin remains one of the most widely used jQuery date and time picker plugins. It supports date picker, time picker, inline mode, locale setup, callbacks, npm, and Yarn. It fits older admin panels, booking forms, and jQuery-heavy sites better than a modern component library.

Features:

• Date and time selection.
• Inline calendar mode.
• Callback event support.
• npm and Yarn install commands.
• Locale setup through jQuery.datetimepicker.setLocale().

Use case:

Use it for an existing jQuery booking form that needs a proven date and time picker with minimal migration work.

[Live Demo] [Download]

Bootstrap 5/4/3 Date Time Picker With jQuery

Best for: Bootstrap 3, 4, or 5 projects that already load jQuery and want a date/time picker consistent with Bootstrap's visual style.

This is the upgraded version of the smalot's bootstrap-datetimepicker plugin that allows you to create a highly customizable date & time picker in Bootstrap 5, Bootstrap 4, or Bootstrap 3 projects.

Features:

• Bootstrap 3, 4, and 5 support.
• Custom date format.
• Start and end date limits.
• Hour, day, month, year, and decade views.
• Keyboard navigation.

Use case:

Use it for a Bootstrap admin form that needs date and time selection and already depends on jQuery.

[Demo] [Download]

Pretty Persian Date Time Picker with Bootstrap 5/4/3

Best for: Applications that must display a Persian (Jalali) calendar for users in Iran and other Persian-speaking regions.

This library targets Persian and Gregorian calendar workflows. The current Bootstrap 5+ version removes jQuery, and older branches support Bootstrap 3 and Bootstrap 4. It includes date range options, time picker support, modal mode, inline mode, Persian number output, disabled dates, and date conversion helpers.

Features:

• Persian and Gregorian date modes.
• Bootstrap 5+ current branch.
• Bootstrap 3 and Bootstrap 4 branches.
• Date range support.
• Time picker support.
• Modal and inline modes.

Use case:

Use it for Persian calendar forms in reservation systems, regional admin tools, and .NET-backed business apps.

[Demo] [Download]

Select Multiple Dates & Date Ranges in jQuery - MultiDatesPicker

Best for: Applications that require users to select multiple non-sequential dates or define multiple date ranges from a single calendar interface.

MultiDatesPicker extends jQuery UI datepicker instead of replacing it. This is good for older applications that already use jQuery UI themes and datepicker behavior. The plugin supports selected dates, disabled dates, date ranges, maximum picks, alternate output fields, and methods for reading or changing selected dates.

Features:

• Multiple nonsequential date selection.
• Date range mode.
• Disabled date arrays.
• Maximum selection count.
• Alternate output field support.
• jQuery UI datepicker extension pattern.

Use case:

Use it for event planning, booking exceptions, classroom schedules, or availability calendars inside a jQuery UI app.

[Demo] [Download]

Minimal User-friendly Date Time Picker - jQuery Dateandtime.js

Best for: jQuery projects that need a split date and time input with a minimal footprint and no full calendar popup.

It is a really simple and user-friendly jQuery datepicker plugin that turns a normal text input box into a date input and a time input, so that users can select the date and time respectively.

Features:

• Small jQuery helper.
• Native date input output.
• Native time input output.
• Simple dateAndTime() initializer.

Use case:

Use it for a lightweight internal form where you want native browser inputs and a simple combined value.

[Demo] [Download]

Best Vanilla JS Date/Time Libraries:

Powerful Multilingual Date/Time Picker - Tempus Dominus

Best for: Vanilla JavaScript projects that need a full date, time, and range picker with no external dependencies.

A powerful, fully customizable and lightweight date/time picker for Vanilla JavaScript and jQuery. It is a zero dependency replacement for the native HTML5 date & time input type.

Features:

• Date and time picker support.
• TypeScript declarations.
• npm install support.
• Popper 2 positioning.
• Optional jQuery provider.
• Locale and restriction options.

Use case:

Use it for a modern dashboard or admin form that needs date and time selection plus TypeScript-friendly setup.

[Demo] [Download]

User-friendly Datetime Range Picker With Predefined Date Ranges

Best for: Analytics dashboards and reporting UIs where users select standard time windows without clicking through a calendar each time.

This is the vanilla JS version of the jQuery Date Range Picker plugin, which allows you to create a customizable, nice-looking date range picker with pre-defined date ranges.

Features:

• Date and time range selection.
• Predefined ranges.
• Vanilla JavaScript setup.
• CDN usage.
• Moment.js date handling.

Use case:

Use it for an older reporting interface that already uses Moment.js and needs predefined ranges such as today, last 7 days, and this month.

[Demo] [Download]

Vanilla JavaScript Date & Date Range Picker For The Web

Best for: Teams that need a framework-agnostic date range picker with accessible markup and multi-language support in a zero-dependency setup.

A flexible, powerful, accessible, multi-language, framework-agnostic date & date range picker for modern web design. Inspired by bootstrap-datepicker, and it works with most popular front-end frameworks such as Bootstrap, Bulma, Foundation, etc.

Features:

• Date picker and date range picker modes.
• 0 runtime dependencies.
• Keyboard operation support.
• i18n support.
• Standalone and CSS framework styling.
• Browser-ready built files.

Use case:

Use it for a form that needs a modern vanilla date picker and does not need a time picker.

[Demo] [Download]

Feature-rich Calendar & Date Picker Components – Cally

Best for: Modern web projects that want a calendar and date picker as native web components, compatible with any framework or no framework at all.

Cally provides a set of responsive, customizable, accessible, feature-rich calendar web components for web applications, with a minimal bundle size of 8.5KB min/gzip. These components support single dates, date ranges, and multi-month displays while maintaining complete accessibility and localization support.

Features:

• Single date selection and date ranges
• Multiple month displays
• RTL text direction
• Screen reader compatibility
• Keyboard navigation
• Custom theming through CSS parts
• Full localization via Intl.DateTimeFormat

Use case:

Use it for a modern booking UI, availability calendar, or framework-agnostic component library.

[Demo] [Download]

Lightweight Accessible Datepicker Calendar Component – DateDreamer

Best for: Vanilla JavaScript projects that need an accessible, lightweight datepicker with a straightforward API.

An easy, lightweight, and accessible date picker & calendar component written in Vanilla JavaScript.

Features:

• Inline calendar mode.
• Toggle calendar mode.
• npm and script-tag setup.
• Date format option.
• Change and render callbacks.
• Dark mode option.

Use case:

Use it for open source projects or internal tools where GPL-3.0 licensing is acceptable.

[Demo] [Download]

How to Choose

Choose a jQuery picker when your existing page already depends on jQuery. jQuery DateTimePicker is the safest legacy pick for a standard date and time input. MultiDatesPicker is better when users must pick several dates from one calendar. jQuery Dateandtime.js is only a small utility for native date and time controls.

Choose a Bootstrap picker when your form layout already uses Bootstrap. Simplicite Bootstrap DateTimePicker fits general Bootstrap date time fields. MD.BootstrapPersianDateTimePicker fits Persian calendar interfaces and Bootstrap 5+ projects.

Choose a vanilla JavaScript picker when you want fewer dependencies. Vanilla JS Datepicker is the best general pick for date and range fields. Vanilla DateTimeRangePicker fits teams that still use Moment.js and need predefined reporting ranges.

Choose Cally when you want web components instead of a jQuery plugin. It works well for teams that want HTML-friendly calendar elements, TypeScript declarations, localization, and accessibility work visible in the source materials.

Choose Tempus Dominus when you need date and time selection in a modern npm workflow. It has TypeScript declarations and no required jQuery or Moment.js dependency, but support now leans toward sponsored work.

Can't find the perfect plugin?

Instead of settling for legacy code, build exactly what your project needs in seconds. Discover the 10 Best Free AI Tools for Frontend Developers and let AI write the boilerplate for you.

Final Thoughts:

In this article, we’ve reviewed the 10 best Date And Time Picker JavaScript plugins. Keep in mind that a lot of developers will find such plugins as unnecessary and prefer to write their own instead. That is fine, but if you are looking for something professional, easy to install and use, you should check out one of the plugins we have listed above.

Seeking more jQuery plugins or JavaScript libraries to create awesome date/time pickers on the web & mobile? See jQuery Date Picker and JavaScript Date Picker sections for more details.

More Resources:

• 10 Best Date And Timer Pickers In Vanilla JavaScript
• 6 Best shadcn/ui Date Picker Components for React + TailwindCSS
• 10 Best Date Picker Components For Vue.js
• Best Date & Timer Picker Components For React & React Native