/monthpicker

Simple monthpicker using react

Primary LanguageJavaScript

Simple, clean monthpicker component built with react, styled-components and date-fns

Screenshot

Installation

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

Usage

import Monthpicker from '@compeon-os/monthpicker'

<Monthpicker format='MM.yyyy' onChange={this.handleChange}>
  <div>Click me</div>
</Monthpicker>

Props

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

Author

baahrens (bahrens@compeon.de)

COMPEON

License

MIT