react-month-picker-simple
v1.0.8
Published
react-month-picker-simple is simplest month picker component.
Downloads
657
Maintainers
Readme
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 |