Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Date Picker with Date and Time
A React date and time picker combining calendar selection with an HTML5 time input field for precise datetime scheduling in a unified interface
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Setting event deadlines, scheduling social media posts, or planning deployments—you need precise date AND time, not just a day. This React datetime picker combines shadcn/ui's Calendar with a native time input using HTML5 type equals time. Built with Radix UI and date-fns, it synchronizes date and time into a single Date object—perfect for event scheduling, content publishing, reminder systems, and any feature requiring exact timestamps.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Appointment Picker
Calendar with clickable time slot selection
Date Range Picker
Two-month calendar for range selection
Natural Language Shortcuts
Quick select buttons like Today and Tomorrow
Month and Year Selector
Dropdown navigation for month and year
Disabled Dates
Calendar with unavailable dates blocked
Custom Styled Calendar
Calendar with styled day appearance
Questions you might have
React Date Picker as Appointment Picker
A React appointment booking date picker combining calendar navigation with available time slot selection in a split-panel interface
React Date Picker with Natural Language
A React date picker with natural language quick select shortcuts like Today, Tomorrow, and In a week for faster common date selection