@compeon/datepicker NPM

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

Screenshot

Installation

yarn add @compeon/datepicker

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

yarn add styled-components

import Datepicker from '@compeon/datepicker'

<Datepicker date={new Date()} onChange={this.handleChange}>
  <div>Click me</div>
</Datepicker>

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	`-`