shadcn-year-picker

A year picker component for shadcn/ui built with React and Radix UI.

Installation

npm install shadcn-year-picker

Usage

Basic Usage

import { YearPicker } from "shadcn-year-picker"

function App() {
  const [year, setYear] = React.useState<number>()

  return (
    <YearPicker
      value={year}
      onChange={setYear}
      placeholder="Select year"
      minYear={1950}
      maxYear={2024}
    />
  )
}

With React Hook Form

import { YearPicker } from "shadcn-year-picker"
import { useForm } from "react-hook-form"

function App() {
  const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm()

  const getCurrentYear = () => new Date().getFullYear()

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <YearPicker
        {...register('year', {
          required: 'El año es requerido',
          validate: (value) => {
            if (!value) return 'El año es requerido'
            const currentYear = getCurrentYear()
            if (value < 1950 || value > currentYear) {
              return `El año debe estar entre 1950 y ${currentYear}`
            }
            return true
          },
        })}
        minYear={1950}
        maxYear={getCurrentYear()}
        placeholder="Selecciona un año"
        className="w-full"
        disabled={isSubmitting}
      />
      {errors.year && <p className="text-red-500">{errors.year.message}</p>}
    </form>
  )
}

Props

• value?: number | string - The currently selected year (supports both number and string for react-hook-form compatibility)
• onChange?: (year: number) => void - Callback fired when a year is selected
• onBlur?: React.FocusEventHandler<HTMLButtonElement> - Callback fired when the picker loses focus
• minYear?: number - Minimum selectable year (default: 1950)
• maxYear?: number - Maximum selectable year (default: current year)
• placeholder?: string - Placeholder text when no year is selected
• className?: string - Additional CSS classes for the trigger button
• disabled?: boolean - Whether the picker is disabled
• name?: string - Name attribute for form integration
• All standard button props are also supported

Peer Dependencies

This package requires the following peer dependencies:

• react (^18.0.0 || ^19.0.0)
• react-dom (^18.0.0 || ^19.0.0)
• @radix-ui/react-popover (^1.1.4)
• @radix-ui/react-slot (^1.1.1)
• lucide-react (^0.400.0)
• class-variance-authority (^0.7.0)
• clsx (^2.0.0)
• tailwind-merge (^2.0.0)

Styling

This component uses Tailwind CSS classes. Make sure you have Tailwind CSS configured in your project and include the necessary shadcn/ui CSS variables and styles.

License

MIT