Simple, clean monthpicker component built with react, styled-components and date-fns
yarn add @compeon-os/monthpicker
You also need to have styled-components
installed, so if that's not the case already
yarn add styled-components
import Monthpicker from '@compeon-os/monthpicker'
<Monthpicker format='MM.yyyy' onChange={this.handleChange}>
<div>Click me</div>
</Monthpicker>
prop | description | default |
---|---|---|
month | the currently selected month | new Date().getMonth() |
year | the currently selected year | new Date().getFullYear() |
locale | the locale that is used for displaying monthnames | de |
format | format the onChange function is called with. Can be anything from this list |
MM.yyyy |
onBlur | function that is called when the picker is blurred | - |
onFocus | function that is called when the picker is focussed | - |
onChange | function that is called when the selected month changes. Will be called with { month: 1, year: 2018 } as the first param when no format is specified. Second param is always the triggering event. |
- |
children | node(s) which on click trigger the opening of the picker | - |
allowedYears | either an object in the format { before: 2019, after: 2016 } (also works with only one of after or before ) or an array with the allowed years [2016, 2017, 2018] |
- |
primaryColor | the primary color that is used | #27718c |
secondaryColor | the secondary color that is used | white |
hoverColor | the color that is used for hovering over a month | #d3d3d330 |
MIT