For date and time pickers, the first results are airbnb/react-dates (This React date picker component supports date range selection, localization, and CSS-based customization, making it a fitting choice for form development), hacker0x01/react-datepicker (This project provides a React date picker component with keyboard accessibility and layout customization, though range selection and time picking are supported through specific features rather than a dedicated all-in-one out-of-the-box mode) and flatpickr/flatpickr (Flatpickr is a lightweight JavaScript date and time selection library that handles ranges and formatting well, though it lacks native React support out of the box without wrapper components). mui/mui-x and eonasdan/tempus-dominus round out the shortlist. Compare the match explanations and check the project documentation against your requirements.
Compare open-source date and time picker components for web applications to find the right interface elements for your project.
react-dates is a set of React components for date selection, providing interfaces for picking single dates or date ranges through controlled input components and calendars. The project features built-in support for internationalization, allowing date formats and interface strings to be translated via locale settings. It also supports visual customization through theme registration and CSS overrides to match specific application styles. The component suite covers a variety of selection workflows, including calendar range selection and date range input fields.
This React date picker component supports date range selection, localization, and CSS-based customization, making it a fitting choice for form development.
This project is a reusable React datepicker component providing an accessible, localized interface for selecting dates and times within web applications. It functions as an input field that triggers a calendar popup for precise temporal data entry. The component is designed for flexibility, allowing for a customizable calendar layout and the integration of custom external elements to trigger the picker. It supports marking holidays with custom labels and styles and implements date selection restrictions through boundaries, exclusion lists, and filter functions. The system includes comprehens
This project provides a React date picker component with keyboard accessibility and layout customization, though range selection and time picking are supported through specific features rather than a dedicated all-in-one out-of-the-box mode.
Flatpickr is a lightweight, dependency-free JavaScript library designed to provide a modular date and time selection interface for web applications. It functions as a versatile web component that integrates into existing forms, offering a consistent user experience for picking single dates, ranges, or multiple values while maintaining a clear separation between human-readable display strings and machine-readable data. The library distinguishes itself through a robust configuration-driven architecture that allows for dynamic runtime updates and extensive customization of date formatting via a
Flatpickr is a lightweight JavaScript date and time selection library that handles ranges and formatting well, though it lacks native React support out of the box without wrapper components.
MUI X is a collection of advanced React UI components for building data-rich applications, including a data grid, charting library, date and time pickers, scheduler, and tree view. The library is built with accessibility as a core principle, ensuring all components meet WCAG and WAI-ARIA standards for keyboard navigation and screen reader announcements. The components are designed for extensibility and performance. The data grid offers comprehensive data management with sorting, filtering, pagination, column pinning, row grouping, inline editing, and Excel export. The charting library support
MUI X is a comprehensive React UI component library that provides advanced date and time pickers with range selection, customizable formatting, keyboard accessibility, and modular design.
Tempus Dominus is a JavaScript date-time picker library designed to integrate with Bootstrap-based web projects, replacing manual text entry with an interactive calendar and clock interface. It functions as a form input enhancement that provides visual selection of single dates, times, or combined date-time values through a calendar and clock widget. The picker is built as a collection of independent UI components that manage their own state and rendering, with visual customization achieved entirely through CSS variables and class overrides without requiring JavaScript configuration. User int
Tempus Dominus is a JavaScript date and time picker library that integrates with form inputs and supports customizable formatting and modular widgets, though it lacks native React support.
bootstrap-datepicker is a JavaScript calendar widget and UI extension designed to integrate with the Bootstrap CSS framework. It provides a graphical calendar interface for selecting dates within web applications, serving as a specialized component for Bootstrap web forms. The project functions as a client-side date selection tool that replaces manual text entry with an interactive calendar popup. It focuses on improving the frontend user interface for date-related inputs.
This repository provides a JavaScript calendar widget and UI extension that integrates with Bootstrap forms for interactive date selection, though it targets vanilla JavaScript/jQuery rather than React.
Coss is an accessible UI component library and design system framework used to build web interfaces. It provides a comprehensive kit of interactive elements and layout building blocks that follow screen reader and keyboard navigation standards. The project functions as a UI overlay management library, offering specialized tools for implementing anchored popovers, tooltips, and slide-out panels with smooth transitions. It includes a set of accessible form primitives and selection controls to ensure compatibility across different assistive technologies. Its broader capabilities cover the const
Coss is an accessible UI component library for React that includes date picker primitives and form controls, though it offers a broader design system framework rather than a dedicated standalone date-and-time picker.
Mantine is a comprehensive component library for building accessible and responsive web applications. It provides a foundational set of UI elements and layout primitives, anchored by a base component that supports consistent styling, spacing, and layout properties across the entire interface. The library is built on a design-driven theme engine that uses a provider-based system to propagate global design tokens and color schemes throughout an application. The library distinguishes itself through a robust architecture that emphasizes component composition and reusable interaction logic. It uti
Mantine is a comprehensive React UI component library that includes robust date and time picker components, though its broad full-framework scope makes it heavier than a standalone picker.
shadcn/ui offers a collection of React UI components and a CLI-driven registry system for direct source code integration.
This repository provides customizable React UI components that can be integrated directly into your codebase to build date and time pickers, though it requires combining primitives like calendars and popovers rather than offering a single drop-in picker widget.
Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Try live example at https://duetds.github.io/date-picker/
Duet Date Picker is a web component for picking dates that prioritises accessibility, but it lacks built-in React support and time picking capabilities out of the box.
A date picker for your React app.
This repository provides a dedicated date picker component built specifically for React applications, matching the core requirement even though it lacks built-in time picking and range selection out of the box.
⚛️📆 Flexible React date range picker calendar with no dependencies.
This is a React date range picker component that offers a lightweight, dependency-free option for date selection, though it lacks a built-in time picker and advanced formatting features.
DateRangePicker is a reusable component for shadcn using Radix UI and Tailwind CSS. Includes preset date ranges, text entry, calendar selection and date comparison
This repository provides a reusable date range picker component built for shadcn/ui and Tailwind CSS, making it a fitting choice for web forms requiring calendar selection and date ranges.
mdDateTime
This repository provides a date and time picker component for web interfaces, though it lacks specific support for React and range selection.
| Repository | Stars | Language | License | Last push |
|---|---|---|---|---|
| airbnb/react-dates | 12.2K | JavaScript | MIT | |
| hacker0x01/react-datepicker | 8.4K | TypeScript | MIT | |
| 16.5K |
| TypeScript |
| MIT |
| mui/mui-x | 5.8K | TypeScript | — |
| eonasdan/tempus-dominus | 7.2K | HTML | MIT |
| eternicode/bootstrap-datepicker | 12.7K | JavaScript | Apache-2.0 |
| cosscom/coss | 10.1K | TypeScript | AGPL-3.0 |
| mantinedev/mantine | 31.3K | TypeScript | MIT |
| shadcn-ui/ui | 116.7K | TypeScript | MIT |
| duetds/date-picker | 1.7K | TypeScript | MIT |