react-month-picker-simple is simplest month picker component.

Installation

npm install react-month-picker-simple

PlayGround

https://ey920911.github.io/react-month-picker-simple/

Simple example

basic style

Example Code

import React, { CSSProperties } from 'react';
import MonthPicker from 'react-month-picker-simple';

export default function () {
    return (
        <div style={{width:'300px'}}>
            <MonthPicker handleChange={(date: Date)=> {}}/>
        </div>
    )
}

customize style

Example Code

import React, { CSSProperties } from 'react';
import MonthPicker from 'react-month-picker-simple';

const BaseStyle: CSSProperties ={
  backgroundColor: 'blue',
  border:'1px solid white',
  color:'white'
}

const SelectedStyle: CSSProperties ={
  backgroundColor: 'white',
  color:'black'
}

export default function () {
    return (
        <div style={{width:'300px'}}>
             <MonthPicker
                language="zh"
                buttonStyle={BaseButtonStyle}
                selectedButtonStyle={SelectedStyle}
                handleChange={(date: any) => {}}
            />
        </div>
    )
}

Props

All props list of react-month-picker-simple.

| Name | Required | Type | Default | Description | | ----------------------- | -------- | -------------------- | ---------------- | --------------------------------------- | | handleChange | true | (date: Date) => void | 1 | The function to catch changed date | | minYear | false | number | currentYear - 20 | The value of minium year to select year | | maxYear | false | function | currentYear | The value of maxium year to select year | | language | false | 'en', 'ko', 'zh' | 'en' | The language info | | customMonth | false | string[] | undefined | The customed month info | | buttonStyle | false | CSSProperties | undefined | The button style not selected | | selectedButtonStyle | false | CSSProperties | undefined | The button style that selected |