Year Picker

YearPicker presents a configurable page of years with roving focus, paging, constraints, locale formatting, and single or multiple selection. Selected values are @internationalized/date dates normalized to January 1.

Anatomy

• #previous: Previous-page control content.
• #heading: Visible year-range heading.
• #next: Next-page control content.
• #year: Year button content and state.
• #footer: Optional content after grid.

Usage

<script setup lang="ts">
import type { CalendarDateValue, YearPickerModelValue } from "akaza-ui";
import { CalendarDate } from "@internationalized/date";
import { shallowRef } from "vue";
import { YearPicker } from "akaza-ui";

const value = shallowRef<YearPickerModelValue>();
const page = shallowRef<CalendarDateValue>(new CalendarDate(2024, 1, 1));
</script>

<template>
  <YearPicker v-model="value" v-model:placeholder="page" />
</template>

Examples

Page size and columns

yearsPerPage controls paging distance and visible item count. columns controls the number of keyboard rows.

<YearPicker :years-per-page="9" :columns="3" />

Multiple years

Use multiple with an array model for non-contiguous years.

<YearPicker v-model="years" multiple prevent-deselect />

Constraints

Boundaries and matcher props use complete date values but are compared at year precision.

<YearPicker
  :min-value="new CalendarDate(2025, 1, 1)"
  :max-value="new CalendarDate(2035, 1, 1)"
  :is-year-unavailable="date => date.year === 2030"
/>

Custom year content

<YearPicker>
  <template #year="{ label, selected }">
    <strong v-if="selected">{{ label }}</strong>
    <span v-else>{{ label }}</span>
  </template>
</YearPicker>

API Reference

Models

Props

Emits

Slots

Methods

UI Options

Styling Hooks

Keyboard