README
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 (bahrens@compeon.de)
License
MIT