shadcn.io is not affiliated with official shadcn/ui
Calendar examples · Standard
Calendar with Date and Time for React
A calendar with a time input under it for picking a date and a time.
A Calendar with a Time field under it, split by a divider in one frame. The time is the browser's native time input in a Field, starting at 12:00. Use it for reminders, publishing times and meetings, and combine the date and the time when you submit.
Preview
Installation
FAQ
How do I read the selected date?
mode="single" makes selected one date and onSelect the setter. This demo stores that date in state, starting from new Date().
How is the time entered?
The time is an Input with type="time" inside a Field. FieldLabel reads Time, value starts at 12:00, and onChange stores event.target.value in its own state. Changing the time leaves the calendar date as it is.
Are the date and the time one value?
date and time are two pieces of state. The calendar updates date, and the input updates time. This demo keeps the hours and minutes on the time state.
How is the input attached to the calendar?
A divide-y stack with overflow-hidden, rounded-md and border holds the calendar, then the field. The field has p-4.
Related
- Calendar as Appointment PickerA calendar beside a scrolling list of
- Calendar with Natural LanguageA calendar with quick-select shortcuts
- Date Picker with RangeA date range picker that shows two months
- Calendar with Range in DialogA button that opens a dialog with a
- Calendar with Month and Year SelectorA calendar with month and year dropdowns
- Basic Button GroupThree rows of outline buttons joined into