@datepicker-react/styled

An easily internationalizable, accessible, mobile-friendly datepicker library for the web, build with styled-components.

N.B. this project is looking for a new maintainer. I do not have time to maintain it unfortunately. If anyone would like to take it over please file and issue saying you'd like to take it

over and I will transfer it to you.

How to build your own datepicker?

Simple. Use React hooks (@datepicker-react/hooks).

Live Playground

For examples of the datepicker in action, go to https://datepicker-react.netlify.com/.

OR

To run that demo on your own computer:

• Clone this repository
• yarn install && yarn bootstrap
• yarn storybook
• Visit http://localhost:6006/

Getting Started

Install

yarn add @datepicker-react/styled styled-components

Include component

import{DateRangeInput,DateSingleInput,Datepicker}from'@datepicker-react/styled'

DateRangeInput

The DateRangeInput is a fully controlled component that allows users to select a date range. You can control the selected dates using the startDate, endDate, and onDatesChange props as shown below. Similarly, you can control which input is focused as well as calendar visibility (the calendar is only visible if focusedInput is defined) with the focusedInput and onFocusChange props as shown below.

Here is the minimum REQUIRED setup you need to get the DateRangeInput working:

IE11 is not supported

importReact,{useReducer}from'react'import{DateRangeInput}from'@datepicker-react/styled'constinitialState={startDate: null,endDate: null,focusedInput: null,}functionreducer(state,action){switch(action.type){case'focusChange':
return{...state,focusedInput: action.payload}case'dateChange':
returnaction.payloaddefault:
thrownewError()}}functionApp(){const[state,dispatch]=useReducer(reducer,initialState)return(<DateRangeInputonDatesChange={data=>dispatch({type: 'dateChange',payload: data})}onFocusChange={focusedInput=>dispatch({type: 'focusChange',payload: focusedInput})}startDate={state.startDate}// Date or nullendDate={state.endDate}// Date or nullfocusedInput={state.focusedInput}// START_DATE, END_DATE or null/>)}

The following is a list of other OPTIONAL props you may provide to the DateRangeInput to customize appearance and behavior to your heart's desire.

displayFormat?: string|FormatFunction// Default: 'MM/DD/YYYY'
phrases?: DateRangeInputPhrases
showStartDateCalendarIcon?: boolean// Default: true
showEndDateCalendarIcon?: boolean// Default: trueonClose?(): voidvertical?: boolean // Default: falseshowResetDates?: boolean // Default: trueshowSelectedDates?: boolean // Default: trueshowClose?: boolean // Default: truertl?: boolean// Default: falseplacement?: 'top'|'bottom'// Default: bottomunavailableDates?: Date[]// Default: []minBookingDate?: DatemaxBookingDate?: DatenumberOfMonths?: number // Default: 2minBookingDays?: number // Default: 1exactMinBookingDays?: boolean// Default: falsefirstDayOfWeek?: FirstDayOfWeek// Default: 1initialVisibleMonth?: DateisDateBlocked?(date: Date): boolean
dayLabelFormat?(date: Date): string
weekdayLabelFormat?(date: Date): string
monthLabelFormat?(date: Date): string
onDayRender?(date: Date): React.ReactNodestartDateInputId?: string
endDateInputId?: string

Datepicker

The Datepicker is a fully controlled component that allows users to select a date range. You can control the selected dates using the startDate, endDate, and onDatesChange props as shown below. Similarly, you can control which input is focused with the focusedInput prop.

Here is the minimum REQUIRED setup you need to get the Datepicker working:

IE11 is not supported

importReact,{useState}from'react'import{Datepicker,START_DATE}from'@datepicker-react/styled'functionApp(){const[state,setState]=useState({startDate: null,endDate: null,focusedInput: START_DATE,})functionhandleDatesChange(data: OnDatesChangeProps){if(!data.focusedInput){setState({...data,focusedInput: START_DATE})}else{setState(data)}}return(<DatepickeronDatesChange={handleDatesChange}startDate={state.startDate}// Date or nullendDate={state.endDate}// Date or nullfocusedInput={state.focusedInput}// START_DATE, END_DATE or null/>)}

The following is a list of other OPTIONAL props you may provide to the Datepicker to customize appearance and behavior to your heart's desire.

phrases?: DatepickerPhrases
displayFormat?: string|FormatFunction// Default: 'MM/DD/YYYY'onClose?(): voidshowResetDates?: boolean // Default: trueshowSelectedDates?: boolean // Default: trueshowClose?: boolean // Default: truevertical?: boolean // Default: falsertl?: boolean// Default: falseunavailableDates?: Date[]// Default: []minBookingDate?: DatemaxBookingDate?: DatenumberOfMonths?: number // Default: 2minBookingDays?: number // Default: 1exactMinBookingDays?: boolean // Default: falsefirstDayOfWeek?: FirstDayOfWeek// Default: 0initialVisibleMonth?: DateisDateBlocked?(date: Date): boolean
dayLabelFormat?(date: Date): string
weekdayLabelFormat?(date: Date): string
monthLabelFormat?(date: Date): string
onDayRender?(date: Date): React.ReactNode

DateSingleInput

The DateSingleInput is a fully controlled component that allows users to select a date. You can control the selected date using the date and onDateChange props as shown below. Similarly, you can control calendar visibility (the calendar is only visible if showDatepicker is true) with the showDatepicker and onFocusChange props as shown below.

Here is the minimum REQUIRED setup you need to get the DateSingleInput working:

IE11 is not supported

importReact,{useReducer}from'react'import{DateSingleInput}from'@datepicker-react/styled'constinitialState={date: null,showDatepicker: false,}functionreducer(state,action){switch(action.type){case'focusChange':
return{...state,showDatepicker: action.payload}case'dateChange':
returnaction.payloaddefault:
thrownewError()}}functionApp(){const[state,dispatch]=useReducer(reducer,initialState)return(<DateSingleInputonDateChange={data=>dispatch({type: 'dateChange',payload: data})}onFocusChange={focusedInput=>dispatch({type: 'focusChange',payload: focusedInput})}date={state.date}// Date or nullshowDatepicker={state.showDatepicker}// Boolean/>)}

The following is a list of other OPTIONAL props you may provide to the DateSingleInput to customize appearance and behavior to your heart's desire.

minBookingDate?: Date
maxBookingDate?: Date
numberOfMonths?: number
firstDayOfWeek?: FirstDayOfWeek
displayFormat?: string|FormatFunction
phrases?: DateSingleInputPhrases
showCalendarIcon?: boolean
vertical?: boolean
showResetDate?: boolean
showClose?: boolean
rtl?: boolean
placement?: 'top'|'bottom'
initialVisibleMonth?: Date
unavailableDates?: Date[]// Default: []isDateBlocked?(date: Date): booleanonClose?(): voiddayLabelFormat?(date: Date): stringweekdayLabelFormat?(date: Date): string
monthLabelFormat?(date: Date): string
onDayRender?(date: Date): React.ReactNodeinputId?: string

Theming

@datepicker-react/styled supports theming with Styled components ThemeProvider and Styled System theme-based style.

<ThemeProvidertheme={{breakpoints: ['32em','48em','64em'],reactDatepicker: {daySize: [36,40],fontFamily: 'system-ui, -apple-system',colors: {accessibility: '#D80249',selectedDay: '#f7518b',selectedDayHover: '#F75D95',primaryColor: '#d8366f',},},}}>
...
</ThemeProvider>

• See all theme props
• CodeSandbox example

Who's using

LifeOnScreen

Articles

• Yet another datepicker in React
• Theming React datepicker
• Create a custom React date picker in 10 minutes

License

Licensed under the MIT License, Copyright © 2019-present Miha Sedej.

See LICENSE for more information.