Skip to content
An easily internationalizable, accessible, mobile-friendly datepicker library for the web, build with styled-components.
JavaScript TypeScript
Branch: master
Clone or download
Latest commit c827ddd Aug 2, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE feat(single datepicker): add single datepicker Jun 11, 2019
.storybook feat(styled-system): upgraded system-system to version 5.0.6. Jun 15, 2019
config WIP(input): enable date input Jul 14, 2019
docs feat(theming): simplified color palette change Jun 22, 2019
packages v1.7.1 Aug 2, 2019
.babelrc feat(storybook): add storybook stories Jun 2, 2019
.coveralls.yml chore(ci): add travis & coveralls Jun 3, 2019
.editorconfig chore(project): init project Mar 25, 2019
.eslintignore chore(commitlint): remove commitlint Apr 4, 2019
.eslintrc.json chore(style): add style props Apr 1, 2019
.gitignore test(hooks): useMonth 100% code coverage Apr 2, 2019
.nvmrc
.stylelintignore feat(hooks): improve useMonth hook Mar 28, 2019
.stylelintrc
.travis.yml docs(DateRangeInput): add tmp docs for DateRangeInput component Jun 3, 2019
.yarnclean feat(storybook): add storybook stories Jun 2, 2019
CHANGELOG.md v1.7.1 Aug 2, 2019
CODE_OF_CONDUCT.md feat(single datepicker): add single datepicker Jun 11, 2019
CONTRIBUTING.md feat(single datepicker): add single datepicker Jun 11, 2019
LICENSE Initial commit Mar 25, 2019
README.md docs(readme): add new article to README Jul 16, 2019
jest.config.js test(hooks): useMonth 100% code coverage Apr 2, 2019
lerna.json
package.json
prettier.config.js chore(project): add prettier and eslint. Mar 25, 2019
tsconfig.json
yarn.lock chore(dependencies): update dependencies Aug 1, 2019

README.md

@datepicker-react/styled

Gzip size Coverage Status Build Status Netlify Status

NPM

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

example

Live Playground

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

OR

To run that demo on your own computer:

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:

import React, {useReducer} from 'react'
import {DateRangeInput} from '@datepicker-react/styled'

const initialState = {
  startDate: null,
  endDate: null,
  focusedInput: null,
}

function reducer(state, action) {
  switch (action.type) {
    case 'focusChange':
      return {...state, focusedInput: action.payload}
    case 'dateChange':
      return action.payload
    default:
      throw new Error()
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <DateRangeInput
      onDatesChange={data => dispatch({type: 'dateChange', payload: data})}
      onFocusChange={focusedInput => dispatch({type: 'focusChange', payload: focusedInput})}
      startDate={state.startDate} // Date or null
      endDate={state.endDate} // Date or null
      focusedInput={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: true
onClose?(): void
vertical?: boolean // Default: false
showResetDates?: boolean // Default: true
showSelectedDates?: boolean // Default: true
showClose?: boolean // Default: true
rtl?: boolean // Default: false
placement?: 'top' | 'bottom' // Default: bottom
minBookingDate?: Date
maxBookingDate?: Date
numberOfMonths?: number // Default: 2
minBookingDays?: number // Default: 1
exactMinBookingDays?: boolean // Default: false
firstDayOfWeek?: FirstDayOfWeek // Default: 1
initialVisibleMonth?(numberOfMonths: number): MonthType[]
isDateBlocked?(date: Date): boolean
dayLabelFormat?(date: Date): string
weekdayLabelFormat?(date: Date): string
monthLabelFormat?(date: Date): string
onDayRender?(date: Date): React.ReactNode

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:

import React, {useState} from 'react'
import {Datepicker, START_DATE} from '@datepicker-react/styled'

function App() {
  const [state, setState] = useState({
    startDate: null,
    endDate: null,
    focusedInput: START_DATE,
  })

  function handleDatesChange(data: OnDatesChangeProps) {
    if (!data.focusedInput) {
      setState({...data, focusedInput: START_DATE})
    } else {
      setState(data)
    }
  }

  return (
    <Datepicker
      onDatesChange={handleDatesChange}
      startDate={state.startDate} // Date or null
      endDate={state.endDate} // Date or null
      focusedInput={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?(): void
showResetDates?: boolean // Default: true
showSelectedDates?: boolean // Default: true
showClose?: boolean // Default: true
vertical?: boolean // Default: false
rtl?: boolean // Default: false
minBookingDate?: Date
maxBookingDate?: Date
numberOfMonths?: number // Default: 2
minBookingDays?: number // Default: 1
exactMinBookingDays?: boolean // Default: false
firstDayOfWeek?: FirstDayOfWeek // Default: 0
initialVisibleMonth?(numberOfMonths: number): MonthType[]
isDateBlocked?(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:

import React, {useReducer} from 'react'
import {DateSingleInput} from '@datepicker-react/styled'

const initialState = {
  date: null,
  showDatepicker: false,
}

function reducer(state, action) {
  switch (action.type) {
    case 'focusChange':
      return {...state, showDatepicker: action.payload}
    case 'dateChange':
      return action.payload
    default:
      throw new Error()
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <DateSingleInput
      onDateChange={data => dispatch({type: 'dateChange', payload: data})}
      onFocusChange={focusedInput => dispatch({type: 'focusChange', payload: focusedInput})}
      date={state.date} // Date or null
      showDatepicker={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?(numberOfMonths: number): MonthType[]
isDateBlocked?(date: Date): boolean
onClose?(): void
dayLabelFormat?(date: Date): string
weekdayLabelFormat?(date: Date): string
monthLabelFormat?(date: Date): string
onDayRender?(date: Date): React.ReactNode

Theming

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

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

How to build your own datepicker?

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

Who's using

LifeOnScreen

Articles

License

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

See LICENSE for more information.


Buy me a coffee

You can’t perform that action at this time.