Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/t0gre/react-datepicker
An easily internationalizable, accessible, mobile-friendly datepicker library for the web, build with styled-components.
https://github.com/t0gre/react-datepicker
datepicker grid i18n react react-hooks rtl styled-components styled-system typescript
Last synced: 11 days ago
JSON representation
An easily internationalizable, accessible, mobile-friendly datepicker library for the web, build with styled-components.
- Host: GitHub
- URL: https://github.com/t0gre/react-datepicker
- Owner: t0gre
- License: mit
- Created: 2019-03-25T13:19:45.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-01-21T18:33:17.000Z (10 months ago)
- Last Synced: 2024-10-13T21:05:38.835Z (30 days ago)
- Topics: datepicker, grid, i18n, react, react-hooks, rtl, styled-components, styled-system, typescript
- Language: JavaScript
- Homepage: https://react-datepicker.netlify.com/
- Size: 5.35 MB
- Stars: 331
- Watchers: 9
- Forks: 54
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @datepicker-react/styled
[](https://img.shields.io/bundlephobia/minzip/@datepicker-react/styled.svg)
[](https://coveralls.io/github/tresko/react-datepicker?branch=master)
[](https://travis-ci.org/tresko/react-datepicker)
[](https://app.netlify.com/sites/datepicker-react/deploys)
[](https://nodei.co/npm/@datepicker-react/styled?downloads=true&downloadRank=true&stars=true)
> 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)](https://github.com/tresko/react-datepicker/tree/master/packages/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
```sh
yarn add @datepicker-react/styled styled-components
```
### Include component
```js
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**
```jsx
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 (
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.
```ts
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
unavailableDates?: Date[] // Default: []
minBookingDate?: Date
maxBookingDate?: Date
numberOfMonths?: number // Default: 2
minBookingDays?: number // Default: 1
exactMinBookingDays?: boolean // Default: false
firstDayOfWeek?: FirstDayOfWeek // Default: 1
initialVisibleMonth?: Date
isDateBlocked?(date: Date): boolean
dayLabelFormat?(date: Date): string
weekdayLabelFormat?(date: Date): string
monthLabelFormat?(date: Date): string
onDayRender?(date: Date): React.ReactNode
startDateInputId?: 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**
```jsx
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 (
)
}
```
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.
```ts
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
unavailableDates?: Date[] // Default: []
minBookingDate?: Date
maxBookingDate?: Date
numberOfMonths?: number // Default: 2
minBookingDays?: number // Default: 1
exactMinBookingDays?: boolean // Default: false
firstDayOfWeek?: FirstDayOfWeek // Default: 0
initialVisibleMonth?: Date
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:
**IE11 is not supported**
```jsx
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 (
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.
```ts
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): boolean
onClose?(): void
dayLabelFormat?(date: Date): string
weekdayLabelFormat?(date: Date): string
monthLabelFormat?(date: Date): string
onDayRender?(date: Date): React.ReactNode
inputId?: string
```
### Theming
`@datepicker-react/styled` supports theming with Styled components `ThemeProvider` and
`Styled System` theme-based style.
```jsx
...
```
- [See all theme props](./docs/THEME_PROPS.md)
- [CodeSandbox example](https://codesandbox.io/s/theming-datepicker-reactstyled-42pdb?fontsize=14)
## Who's using
[LifeOnScreen](https://lifeonscreen.com)
## Articles
- [Yet another datepicker in React](https://tresko.dev/yet-another-datepicker-in-react)
- [Theming React datepicker](https://tresko.dev/theming-react-datepicker-datepicker-react-styled)
- [Create a custom React date picker in 10 minutes](https://tresko.dev/create-a-custom-react-date-picker-in-10-minutes)
## License
Licensed under the MIT License, Copyright © 2019-present Miha Sedej.
See [LICENSE](https://github.com/tresko/react-datepicker/blob/master/LICENSE) for more information.
[](https://www.buymeacoffee.com/T1Eu7XSoF)