Dates
@knitui/dates is the calendar and date/time kit: 34 components from the low-level
Day cell up to a full DateTimePicker, all built on @knitui/components and
sized, themed and slotted the same way.
npx expo install @knitui/dates dayjsimport { DatePickerInput } from "@knitui/dates";
<DatePickerInput label="Ship date" value={date} onChange={setDate} />;Pick the right level
A field that opens a calendar. The default choice for a form.
A free-text field that parses what the user types.
The calendar on its own, for inline use.
Date and time together.
Time only, with presets and a grid.
The composable calendar surface — decade, year, month levels.
Ranges and multiple selection
The pickers are generic over their selection mode:
<DatePicker type="range" value={range} onChange={setRange} />
<DatePicker type="multiple" value={dates} onChange={setDates} />Level components
A calendar is built from levels you can use directly when you need something the
pickers do not offer: DecadeLevel, YearLevel, MonthLevel, and their
…Group variants for multi-month views, plus MonthsList, YearsList,
WeekdaysRow, Day and PickerControl.
That is how the pickers themselves are built, so a custom calendar is composition rather than a fork.
Time entry on device
dayjs
Date maths is dayjs, which is a peer dependency so you control the version and the
plugins (locales, timezones). The kit does not wrap it — value is a Date, and
formatting props take dayjs format strings.