Simple Year Range Picker Component For React

A simple year range picker component for React.

How to use it:

1. Install and import the year range picker component.

# NPM
$ npm i react-year-range-picker

import React, { useState } from 'react'
import { YearRangePicker } from 'react-year-range-picker'

2. Create a basic year range picker and specify the min/max years:

interface IYearRange {
  startYear: number
  endYear: number
}
const Basic = () => {
  const [yearRange, setYearRange] = useState<IYearRange>()
  return (
    <div>
      <h2>Basic Usage</h2>
      <YearRangePicker
        minYear={new Date().getFullYear() - 2}
        maxYear={new Date().getFullYear() + 2}
        onSelect={(startYear: number, endYear: number) => {
          setYearRange({ startYear, endYear })
        }}
        startYear={yearRange?.startYear}
        endYear={yearRange?.endYear}
      />
      <span style={{ marginLeft: '16px' }}>
        Selected Years : {yearRange?.startYear} - {yearRange?.endYear}
      </span>
    </div>
  )
}
export default Basic

3. All available component props to customize the year range picker.

interface YearRangePickerProps {
  minYear: number
  maxYear: number
  startYear?: number | undefined
  endYear?: number | undefined
  disable?: boolean
  style?: React.CSSProperties
  classNames?: string
  spacer?: string
  startText?: string
  endText?: string
  selectedColor?: string
  onSelect?: (startYear: number, endYear: number) => void
}

Preview:

Download Details:

Author: hzengindev

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/hzengindev/react-year-range-picker

License: MIT