Components
Curated UI collection
Date Time Picker React Components
A date time picker is an essential UI component for applications that require users to select specific dates and times. Our collection features 60 React date time picker components and libraries, including 20 exact matches tailored for your development needs. Whether you're building scheduling applications, booking systems, or forms with temporal data requirements, these components provide flexible solutions for capturing date and time input from users.
Datetime Picker
by Yerfa Belkacem
Time Picker
by Ruixen
Time picker
by Preet Suthar![Calendar [React Day Picker] — date time picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/with-time-input/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI
TimePicker
by Mohammad AlHabil
Calendar date and time picker
by shadcn
Day Picker
by 0xUrvish![Calendar [React Day Picker] — date time picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991401753.png)
Calendar [React Day Picker]
by Origin UI
Calendar language date picker
by shadcn
Calendar with time picker inline
by shadcn
Date Picker
by Shailendra Kumar
Calendar with time piker
by shadcn![Calendar [React Day Picker] — date time picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/w/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI
Radial Time Picker
by Mathew
Input
by Origin UI
Calendar Date Picker
by shadcn![Calendar [React Day Picker] — date time picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991629350.png)
Calendar [React Day Picker]
by Origin UI
Date Wheel Picker
by johuniq
Relative Time Card
by tigran tumasov
Relative Time Card
by tigran tumasov
Date Picker
by Kavi Katiyar
Date picker
by shadcn
Date Wheel Picker
by Emmanuel Osiris Balonga
Apple Calendar Picker
by Muhammad Asif![Calendar [React Day Picker] — date time picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991677442.png)
Calendar [React Day Picker]
by Origin UI
Relative Time Card
by tigran tumasov
Datetime Picker
by OpenStatus
Calendar picker in a drawer
by shadcn![Calendar [React Day Picker] — date time picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991576300.png)
Calendar [React Day Picker]
by Origin UI![Calendar [React Day Picker] — date time picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991444744.png)
Calendar [React Day Picker]
by Origin UI![Calendar [React Day Picker] — date time picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/appointment-picker/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI
Calendar day picker
by shadcn
Calendar Date & Time range
by shadcn
Calendar input
by shadcn![Date Picker [react-aria-components] — date time picker component for React & Tailwind by James Shopland](https://cdn.21st.dev/user_jolbol1/date-picker/1045/preview.png)
Date Picker [react-aria-components]
by James Shopland
Universal Date Picker
by Ruixen![Calendar [React Day Picker] — date time picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991842510.png)
Calendar [React Day Picker]
by Origin UI
Calendar
by coss![Calendar [React Day Picker] — date time picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/custom-select-day-style/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI
Calendar Date and Time range
by shadcn
Input
by Origin UI
Input
by Origin UI
Input
by Origin UI![Calendar [React Day Picker] — date time picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/three-months-calendar/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI
DatePicker
by Hero Ui![Calendar [React Day Picker] — date time picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991983843.png)
Calendar [React Day Picker]
by Origin UI
Date Time Input
by Ruixen![Calendar [React Day Picker] — date time picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991942757.png)
Calendar [React Day Picker]
by Origin UI![Calendar [React Day Picker] — date time picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/two-months-calendar/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI
Input
by Origin UI![Calendar [React Day Picker] — date time picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/calendar-with-presets/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI![Time Field [react-aria-components] — date time picker component for React & Tailwind by James Shopland](https://cdn.21st.dev/user_jolbol1/timefield/default/preview.png)
Time Field [react-aria-components]
by James Shopland
DatePicker
by Hero Ui![Calendar [React Day Picker] — date time picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/weekly-numbers/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI
Scheduler
by Ruixen![Calendar [React Day Picker] — date time picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991888250.png)
Calendar [React Day Picker]
by Origin UI
Calendar
by coss![Calendar [React Day Picker] — date time picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991729807.png)
Calendar [React Day Picker]
by Origin UI
Select
by Origin UI
What’s in this collection
- 5 of 36 use Motion
- 11 of 36 use Lucide icons
- 18 need nothing beyond React and Tailwind
- Most common dependencies: lucide-react, motion, date-fns