react-month-range-picker

React component that can select an range of months separated by year

Install in your project

You can find more information in npm

yarn add @viniarruda/react-month-range-picker
or
npm i @viniarruda/react-month-range-picker

Demo here

Examples

Run

To run that demo on your own computer:

Clone this repository
yarn install
yarn storybook
Visit http://localhost:6006/

Props

| Props | type | defaultValue | Info | ------------- | ------------- | ------------- | ------------- | | columns | 1 or 2 | 1 | Columns to show | | initialYear | number | 2020 | The first initialYear | | locale | string | en-US | ex: en-US | | onRangeSelect | function | required | Pass an function to get the RangeParams | | calendarClassname | string | optional | Pass an className to style calendar container | | headerClassname | string | optional | Pass an className to style calendar header | | monthClassname | string | optional | Pass an className to style month item |

Styling

To control the month styles, you can use monthClassName="month" and this name will increment to variant month.

Soo, you can control the styles using:

.month_start .month_selected .month_end

onRangeSelect: (params: RangeParams) => void

type RangeParams = {
  startMonth: number
  startYear: number
  endMonth: number
  endYear: number
}