Dates@knitui/dates

DatePicker

DatePicker is the inline day-selection picker — a full Calendar driven by the shared selection machine. type switches between default (single date), range ([start, end] with a live hover preview), and multiple (toggle an array of days). Values are YYYY-MM-DD strings. Optional presets render quick-jump buttons beside the calendar.

WebiOSAndroid57 own props7 examples

Stories Source Tests Open in Storybook

import { DatePicker } from "@knitui/dates";

Playground

Loading playground…

Playground

<DatePicker />

Examples

Default

Single-date selection (type="default"). Click a day to select; the value is a YYYY-MM-DD string.

Loading example…

DefaultSource Storybook

Range

Range selection (type="range"). Pick a start then an end day.

Loading example…

RangeSource Storybook

Multiple

Multiple selection (type="multiple"). Each click toggles a day in the array.

Loading example…

MultipleSource Storybook

With Presets

Range picker with preset quick-jumps rendered beside the calendar.

Loading example…

With PresetsSource Storybook

Two Columns

Two months shown side by side — handy for range selection.

Loading example…

Two ColumnsSource Storybook

Min Max

Bounded selection — only dates within [minDate, maxDate] are pickable.

Loading example…

Min MaxSource Storybook

Full Width

fullWidth stretches the calendar to its container. With a fixed container height it also fills vertically — the week rows distribute the extra height and the day cells grow taller — so the picker fills a sized panel in both axes.

Loading example…

Full WidthSource Storybook

Props

Prop	Type	Default	Description
`allowDeselect`	`(Type extends "default" ? boolean : never) \| undefined`	—	Whether the user can deselect a date by clicking it again — `type="default"` only.
`allowSingleDateInRange`	`(Type extends "range" ? boolean : never) \| undefined`	—	Whether a single day can be selected as a range — `type="range"` only.
`ariaLabels`	`CalendarAriaLabels \| undefined`	—	`aria-label`s for the controls on the different levels.
`columnsToScroll`	`number \| undefined`	`numberOfColumns`	Number of columns to scroll with the next/prev buttons.
`date`	`string \| Date \| undefined`	—	Displayed date in controlled mode.
`decadeLabelFormat`	`DecadeLabelFormat \| undefined`	`'YYYY'`	dayjs format for the decade label, or a function returning it.
`defaultDate`	`string \| Date \| undefined`	—	Initial displayed date in uncontrolled mode.
`defaultLevel`	`CalendarLevel \| undefined`	`'month'`	Initial displayed level in uncontrolled mode.
`defaultValue`	`DatePickerValue<Type, DateValue> \| undefined`	—	Default value for uncontrolled component.
`disabled` system	`boolean \| undefined`	—
`enableKeyboardNavigation`	`boolean \| undefined`	`true`	Enable enhanced keyboard navigation (web only): Ctrl/Cmd+Arrow steps a year, Ctrl/Cmd+Shift+Arrow steps a decade, `Y` opens the year view.
`excludeDate`	`((date: DateStringValue) => boolean) \| undefined`	—	Predicate marking a day disabled.
`firstDayOfWeek`	`DayOfWeek \| undefined`	`DatesProvider` (1)	First weekday of each row, `0` (Sunday) … `6` (Saturday).
`fullWidth` system	`boolean \| undefined`	`false`	Stretch the list (and its controls) to the full width of its container.
`getDayAriaLabel`	`((date: DateStringValue) => string) \| undefined`	—	Assigns each `Day` an `aria-label` based on its date.
`getDayProps`	`((date: DateStringValue) => Partial<DayProps>) \| undefined`	—	Passes props down to every `Day` (wins over `styles.day`).
`getMonthControlProps`	`((date: DateStringValue) => Partial<PickerControlProps>) \| undefined`	—	Passes props down to each month `PickerControl`, keyed by date (wins over `styles.control`).
`getYearControlProps`	`((date: DateStringValue) => Partial<PickerControlProps>) \| undefined`	—	Passes props down to each year `PickerControl`, keyed by date (wins over `styles.control`).
`headerControlsOrder`	`CalendarHeaderControlName[] \| undefined`	`['previous', 'level', 'next']`	Order in which the controls are rendered.
`hideOutsideDates`	`boolean \| undefined`	`false`	Hide days outside the current month.
`hideWeekdays`	`boolean \| undefined`	`false`	Hide the weekday header row.
`highlightToday`	`boolean \| undefined`	`false`	Highlight today with a border.
`level`	`CalendarLevel \| undefined`	—	Current displayed level in controlled mode.
`locale`	`string \| undefined`	—	dayjs locale; falls back to the value defined in `DatesProvider`.
`maxDate`	`string \| Date \| undefined`	—	Maximum possible date in `YYYY-MM-DD` format or a `Date` object.
`maxLevel`	`CalendarLevel \| undefined`	`'decade'`	Max level the user can zoom out to.
`minDate`	`string \| Date \| undefined`	—	Minimum possible date in `YYYY-MM-DD` format or a `Date` object.
`monthLabelFormat`	`DateLabelFormat \| undefined`	`'MMMM YYYY'`	dayjs format for the month label, or a function returning it.
`monthsListFormat`	`string \| undefined`	`'MMM'`	dayjs format for the month labels.
`nextIcon`	`ReactNode`	—	Replace the next-button icon.
`nextLabel`	`string \| undefined`	—	Next-button `aria-label`.
`numberOfColumns`	`number \| undefined`	`1`	Number of columns displayed next to each other.
`onChange`	`((value: DatePickerValue<Type, string>) => void) \| undefined`	—	Called when value changes.
`onDateChange`	`((date: DateStringValue) => void) \| undefined`	—	Called when the displayed date changes.
`onLevelChange`	`((level: CalendarLevel) => void) \| undefined`	—	Called when the displayed level changes.
`onMonthMouseEnter`	`((event: unknown, date: DateStringValue) => void) \| undefined`	—	Called when the pointer enters a month control (web hover; used for range preview). Cross-platform — the event type is opaque, never a DOM event.
`onMonthSelect`	`((date: DateStringValue) => void) \| undefined`	—	Called when the user selects a month.
`onMouseLeave`	`((event: unknown) => void) \| undefined`	—	Called when the pointer leaves the calendar root (web hover; used by range pickers to clear the hover preview). Cross-platform — the event type is opaque, never a DOM event; Tamagui no-ops it on native.
`onNextDecade`	`((date: DateStringValue) => void) \| undefined`	—	Called when the next-decade button is clicked.
`onNextMonth`	`((date: DateStringValue) => void) \| undefined`	—	Called when the next-month button is clicked.
`onNextYear`	`((date: DateStringValue) => void) \| undefined`	—	Called when the next-year button is clicked.
`onPreviousDecade`	`((date: DateStringValue) => void) \| undefined`	—	Called when the previous-decade button is clicked.
`onPreviousMonth`	`((date: DateStringValue) => void) \| undefined`	—	Called when the previous-month button is clicked.
`onPreviousYear`	`((date: DateStringValue) => void) \| undefined`	—	Called when the previous-year button is clicked.
`onYearMouseEnter`	`((event: unknown, date: DateStringValue) => void) \| undefined`	—	Called when the pointer enters a year control (web hover; used for range preview). Cross-platform — the event type is opaque, never a DOM event.
`onYearSelect`	`((date: DateStringValue) => void) \| undefined`	—	Called when the user selects a year.
`presets`	`DatePickerPreset<Type>[] \| undefined`	—	Predefined values to pick from.
`previousIcon`	`ReactNode`	—	Replace the previous-button icon.
`previousLabel`	`string \| undefined`	—	Previous-button `aria-label`.
`ref`	`Ref<TamaguiElement> \| undefined`	—
`renderDay`	`RenderDay \| undefined`	—	Custom renderer for each day's content.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`CalendarSize \| undefined`	`'md'`	Width/font of the controls.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`type`	`Type \| DatePickerType \| undefined`	—	Picker type: `range`, `multiple` or `default`.
`value`	`DatePickerValue<Type, DateValue> \| undefined`	—	Value for controlled component.
`weekdayFormat`	`DateLabelFormat \| undefined`	`'dd'`	dayjs format for weekday names, or a custom renderer.
`weekendDays`	`DayOfWeek[] \| undefined`	`DatesProvider` ([0, 6])	Indices of weekend days.
`withCellSpacing`	`boolean \| undefined`	`true`	Separate controls/rows with spacing.
`withWeekNumbers`	`boolean \| undefined`	`false`	Display a leading week-number column.
`yearLabelFormat`	`DateLabelFormat \| undefined`	`'YYYY'`	dayjs format for the year label, or a function returning it.
`yearsListFormat`	`string \| undefined`	`'YYYY'`	dayjs format for the year labels.

Plus 495 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.