react-month-picker-simple

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