Dates@knitui/dates

DecadeLevel

DecadeLevel is the top calendar level: a CalendarHeader (decade label + prev/next controls) atop a YearsList ragged 3/3/3/1 year grid. There is no level above a decade, so the level label is non-interactive. The prev/next controls auto-disable at the minDate/maxDate bounds, and the label honours decadeLabelFormat + the DatesProvider locale. Use the styles prop to tweak the header parts and the grid.

WebiOSAndroid7 style slots20 own props7 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

sizeWidth/font of the header controls and year cells.

decadeA date within the displayed decade (`YYYY-MM-DD`).

withNextRender the next control.

true

withPreviousRender the previous control.

true

fullWidthTake the full width of the container.

false

Playground

<DecadeLevel
  decade="2024-01-01"
  size="md"
  withNext
  withPrevious
  fullWidth={false}
  previousLabel="Previous decade"
  nextLabel="Next decade"
  levelControlAriaLabel="Decade"
/>

Examples

Default

The default decade level (header + the 3/3/3/1 year grid).

Loading example…

DefaultSource Storybook

Custom Label

A two-arg decadeLabelFormat function overrides the start – end label.

Loading example…

Custom LabelSource Storybook

Bounded

Bounded — minDate/maxDate auto-disable the prev/next controls at the edges.

Loading example…

BoundedSource Storybook

Full Width

Full-width level — the header and grid fill the container.

Loading example…

Full WidthSource Storybook

Styled Parts

Per-slot styles sugar — round the header controls and recolor the label.

Loading example…

Styled PartsSource Storybook

Sizes

Every size from the shared xxs…xxl cell-metrics ladder.

Loading example…

SizesSource Storybook

Props

Prop	Type	Default	Description
`decade` required	`string`	`2024-01-01`	A date within the displayed decade (`YYYY-MM-DD`).
`decadeLabelFormat`	`DecadeLabelFormat \| undefined`	`'YYYY'`	dayjs format for the decade label, or a function returning it.
`disabled` system	`boolean \| undefined`	—
`fullWidth` system	`boolean \| undefined`	`false`	Take the full width of the container.
`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.
`levelControlAriaLabel`	`string \| undefined`	`Decade`	Level control `aria-label`.
`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.
`nextDisabled`	`boolean \| undefined`	`false`	Disables the next control.
`nextIcon`	`ReactNode`	—	Replace the next-button icon.
`nextLabel`	`string \| undefined`	`Next decade`	Next button `aria-label`.
`onNext`	`(() => void) \| undefined`	—	Called when the next button is pressed.
`onPrevious`	`(() => void) \| undefined`	—	Called when the previous button is pressed.
`previousDisabled`	`boolean \| undefined`	`false`	Disables the previous control.
`previousIcon`	`ReactNode`	—	Replace the previous-button icon.
`previousLabel`	`string \| undefined`	`Previous decade`	Previous button `aria-label`.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`CalendarSize \| undefined` xxs · xs · sm · md · lg · xl · xxl	`'md'`	Width/font of the header controls and year cells.
`styles` system	`SlotStyles<DecadeLevelStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching part (header + grid).
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`withCellSpacing`	`boolean \| undefined`	`true`	Separate controls/rows with spacing.
`withNext`	`boolean \| undefined`	`true`	Render the next control.
`withPrevious`	`boolean \| undefined`	`true`	Render the previous control.
`yearsListFormat`	`string \| undefined`	`'YYYY'`	dayjs format for the year labels.

Style slots

Every part of DecadeLevel can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`header`	`styles={{ header: { … } }}`
`headerControl`	`styles={{ headerControl: { … } }}`
`headerIcon`	`styles={{ headerIcon: { … } }}`
`headerLevel`	`styles={{ headerLevel: { … } }}`
`headerLevelLabel`	`styles={{ headerLevelLabel: { … } }}`
`list`	`styles={{ list: { … } }}`
`root`	`styles={{ root: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 498 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.