Simple datepicker using react, styled-components and date-fns


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @compeon/datepicker in KB


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

Screenshot Screenshot


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>


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 -


baahrens (bahrens@compeon.de)




If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.