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

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