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

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

Usage

import Datepicker from '@compeon/datepicker'

<Datepicker date={new Date()} onChange={this.handleChange}>
  <div>Click me</div>
</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 ([email protected])

COMPEON

License

MIT