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 Svelte, Ark UI does not merge the time onto the date.
Installation
Anatomy
Usage
<div class="divide-y overflow-hidden rounded-md border bg-background"><Calendar onValueChange={handleValueChange} value={value}><CalendarViewControl><CalendarPrevTrigger /><CalendarViewDate /><CalendarNextTrigger /></CalendarViewControl><CalendarTable><CalendarWeekDays /><CalendarTableDays /></CalendarTable></Calendar><Field class="p-4"><FieldLabel>Time</FieldLabel><Input oninput={handleTimeChange} type="time" value={time} /></Field></div>FAQ
How do I read the selected date?
value is a list holding the selected date, and onValueChange receives { value }. This demo starts the list from parseDate(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 onValueChange={handleValueChange} and value={value}. The rest is on the Calendar page.
Field
No extra props in this demo. The rest is on the Field page.
Input
Sets oninput={handleTimeChange}, type="time" and value={time}. The rest is on the Input page.
