shadcn.io is not affiliated with official shadcn/ui
Date Picker examples · Standard
Date Picker with Date and Time for React
A date picker with a time field under the calendar for picking a date and a time together.
A Date Picker with a Time field under the month. Pick a day, set the time, and the button reads both, such as October 10, 2026 at 12:00. The time is the browser's native time input in a Field. Use it for reminders, publishing times and meetings.
Preview
Installation
FAQ
Why doesn't the picker close when I pick a day?
closeOnSelect is false on DatePicker, so the time field stays reachable. Escape, a click outside or the button close it.
How does the time field work?
It's an Input with type="time", starting at 12:00 and updating its own value on change. The browser draws the hours and minutes and formats them in the user's locale.
Is the time stored with the date?
No: the date is the picker's value and the time is a string such as 14:30. Combine them when you submit, for example into an ISO date-time.
What does the button say?
The date in long form followed by at and the time, or Pick a date and time when no date is selected. The button prints the value itself, formatted with Intl.DateTimeFormat, so the text needs no date library.
Related
- Date Picker as Appointment PickerA date picker that opens a calendar
- Date Picker with RangeA date range picker that shows two months
- Date Picker with Natural LanguageA date picker with quick-select shortcuts
- Date Picker with Month and Year SelectorA date picker with month and year
- Date Picker with Disabled DatesA date picker that disables weekends, a
- Date Picker with Custom Select Day StyleA date picker with round days that