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

Installation

1yarn add @compeon/datepicker

You also need to have styled-components installed, so if that's not the case already

1yarn add styled-components

Usage

1import Datepicker from '@compeon/datepicker'
2
3<Datepicker date={new Date()} onChange={this.handleChange}>
4  <div>Click me</div>
5</Datepicker>

Props

prop	description	default
date	the currently selected date	new Date()
displayIsoWeek	whether to display the ISO week number next to the week	true
locale	the locale that is used for displaying monthnames and weekday names	de
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 date changes. First param is the selected date. Second param is always the triggering event.	-
children	node(s) which on click trigger the opening of the picker	-
selectableDates	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 dates [new Date(2018, 5, 2), new Date(2017, 5 2)]	-
weekStartsOn	which weekday to use as the first day	1
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 date	#d3d3d330
className	className passed to the outer wrapper	-
dialogClassName	className passed to the dialog component that is rendered when the dialog is open	-

Author

baahrens (bahrens@compeon.de)

COMPEON

License

MIT