Dates@knitui/dates
MonthPicker
MonthPicker is the inline month-selection picker — a Calendar pinned to the year level (minLevel="year"), zooming year ↔ decade. Selects months in default / range / multiple modes; values are YYYY-MM-DD strings normalised to the first of the month.
WebiOSAndroid36 own props3 examples
import { MonthPicker } from "@knitui/dates";Playground
Loading playground…
<MonthPicker />Examples
Default
Single month selection.
Loading example…
Range
Range of months (type="range").
Loading example…
Multiple
Multiple months 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. |
defaultLevel | CalendarLevel | undefined | — | Initial displayed level 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. |
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`). |
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. |
monthsListFormat | string | undefined | 'MMM' | dayjs format for the month labels. |
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: MonthPickerLevel) => void) | undefined | — | Called when the displayed level changes. |
onMonthSelect | ((date: DateStringValue) => void) | undefined | — | Called when a month is selected. |
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. |
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. |
onPreviousYear | ((date: DateStringValue) => void) | undefined | — | Called when the previous-year button is clicked. |
presets | MonthPickerPreset<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. |
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.