Dates@knitui/dates
YearPicker
YearPicker is the inline year-selection picker — a Calendar pinned to the decade level (minLevel="decade"). Selects years in default / range / multiple modes; values are YYYY-MM-DD strings normalised to Jan 1 of the year.
WebiOSAndroid27 own props3 examples
import { YearPicker } from "@knitui/dates";Playground
Loading playground…
<YearPicker />Examples
Default
Single year selection.
Loading example…
Range
Range of years (type="range").
Loading example…
Multiple
Multiple years toggled into an array.
Loading example…
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. |
defaultValue | DatePickerValue<Type, DateValue> | undefined | — | Default value for uncontrolled component. |
disabled system | boolean | undefined | — | — |
fullWidth system | boolean | undefined | false | Stretch the list (and its controls) to the full width of its container. |
getYearControlProps | ((date: DateStringValue) => Partial<PickerControlProps>) | undefined | — | Passes props down to each year `PickerControl`, keyed by date (wins over `styles.control`). |
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. |
minDate | string | Date | undefined | — | Minimum possible date in `YYYY-MM-DD` format or a `Date` object. |
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. |
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. |
onPreviousDecade | ((date: DateStringValue) => void) | undefined | — | Called when the previous-decade button is clicked. |
onYearSelect | ((date: DateStringValue) => void) | undefined | — | Called when a year is selected. |
presets | YearPickerPreset<Type>[] | undefined | — | Predefined values to pick from. |
previousLabel | string | undefined | — | Previous-button `aria-label`. |
ref | Ref<TamaguiElement> | undefined | — | — |
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 | DatePickerType | Type | undefined | — | Picker type: `range`, `multiple` or `default`. |
value | DatePickerValue<Type, DateValue> | undefined | — | Value for controlled component. |
withCellSpacing | boolean | undefined | true | Separate controls/rows with spacing. |
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.