shadcn.io is an independent project built on shadcn/ui
A month grid sits above a Time field. The day starts as today. The time input starts at 12:00. Changing the time does not change the day.
Use it when a date and a clock time should be chosen together. Drop the time field if you only need the day. A compact field that opens the grid is a Date Picker. In React, Base UI does not merge the time onto the date.
Installation
Anatomy
Usage
<div className="divide-y overflow-hidden rounded-md border bg-background">
<Calendar mode="single" onSelect={setDate} selected={date} />
<Field className="p-4">
<FieldLabel>Time</FieldLabel>
<Input onChange={handleTimeChange} type="time" value={time} />
</Field>
</div>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.
API Reference
Calendar
Sets mode="single", onSelect={setDate} and selected={date}. The rest is on the Calendar page.
Field
No extra props in this demo. The rest is on the Field page.
Input
Sets onChange={handleTimeChange}, type="time" and value={time}. The rest is on the Input page.
