Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/reecelucas/react-datepicker
An accessible, internationalizable React datepicker
https://github.com/reecelucas/react-datepicker
a11y accessibility datepicker internationalization react
Last synced: about 2 months ago
JSON representation
An accessible, internationalizable React datepicker
- Host: GitHub
- URL: https://github.com/reecelucas/react-datepicker
- Owner: reecelucas
- License: mit
- Created: 2019-06-28T09:02:43.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T02:22:29.000Z (about 2 years ago)
- Last Synced: 2024-10-29T20:02:29.275Z (2 months ago)
- Topics: a11y, accessibility, datepicker, internationalization, react
- Language: TypeScript
- Homepage:
- Size: 4.15 MB
- Stars: 12
- Watchers: 1
- Forks: 6
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-datepicker
An accessible, internationalizable React datepicker. [Demo](https://codesandbox.io/s/angry-water-z01z2?fontsize=14&hidenavigation=1).
* [Installation](#installation)
* [Example Usage](#example-usage)
* [Basic](#basic)
* [Initial Date](#initial-date)
* [Min Date](#min-date)
* [Max Date](#max-date)
* [Date Range](#date-range)
* [Exclude Dates](#exclude-dates)
* [Include Dates](#include-dates)
* [Locale](#non-english-locale)
* [Month Format](#month-format)
* [Render Day Content](#render-day-content)
* [Input Date Format](#input-date-format)
* [Screen Reader Message](#screen-reader-message)
* [Props](#props)
* [`DatePicker`](#DatePicker)
* [`DatePickerInput`](#DatePickerInput)
* [`DatePickerCalendar`](#DatePickerCalendar)
* [`DatePickerMonth`](#DatePickerMonth)
* [`DatePickerButton`](#DatePickerButton)
* [`DatePickeTable`](#DatePickeTable)
* [Styling](#styling)
* [LICENSE](#LICENSE)
## Installation
```Bash
yarn add @reecelucas/react-datepicker
```
## Example Usage
### Basic
```jsx
console.log(date)}>
prev()}>
Prev Month
next()}>
Next Month
```
### Initial Date
```jsx
console.log(date)}
>
{/* ... */}
```
### Min Date
```jsx
console.log(date)}
>
{/* ... */}
```
### Max Date
```jsx
console.log(date)}
>
{/* ... */}
```
### Date Range
```jsx
console.log(date)}
>
{/* ... */}
```
### Exclude Dates
```jsx
console.log(date)}
>
{/* ... */}
```
### Include Dates
```jsx
console.log(date)}
>
{/* ... */}
```
### Non-English Locale
Import the required date-fns [`locale`](https://date-fns.org/v2.0.0-alpha.37/docs/I18n#supported-languages)
and make sure to render a custom aria label for each day, using the `renderDayLabel` prop.
```jsx
import { format } from 'date-fns';
import locale from 'date-fns/locale/fr';
console.log(date)}
>
{/* ... */}
{/* ... */}
{
const status = isSelected ? 'Sélectionné. ' : `${isSelectable ? 'Disponible. ' : 'Indisponible. '}`;
return `${status}${format(date, 'eeee, do MMMM yyyy', { locale })}.`;
}}
/>
```
### Custom Month Format
Pass a valid date-fns [`format`](https://date-fns.org/v2.0.0-alpha.37/docs/format) string.
```jsx
console.log(date)}>
{/* ... */}
```
### Render Day Content
```jsx
import { getDate, isWeekend } from 'date-fns';
console.log(date)}>
{/* ... */}
{/* ... */}
(
{getDate(date)}
)}
/>
```
### Custom Input Date Format
Pass a valid date-fns [`format`](https://date-fns.org/v2.0.0-alpha.37/docs/format) string.
```jsx
console.log(date)}>
{/* ... */}
```
### Custom Screen Reader Message
The `DatePickerInput` includes an `aria-describedby` attribute that references
a visually hidden aria message (for use by screen readers). The default message is:
```jsx
<>
Press the down arrow key to interact with the calendar and select a date.
The following keyboard shortcuts can be used to change dates.
- Enter Key: select the date in focus.
-
Right and left arrow keys: Move backward (left) and forward (right) by
one day.
-
Up and down arrow keys: Move backward (up) and forward (down) by one
week.
- Page up and page down keys: Switch months.
- Home and end keys: go to the first or last day of a week.
- Escape key: Return to the date input field.
>
```
But you can render a custom message (E.g. written in another language if you're
passing a [`locale`](#non-english-locale)) by passing a render function...
```jsx
const renderScreenReaderMsg = () => (
I'm a custom screen reader message. I should describe how to interact with
the date picker, playing special attention to the keyboard shortcuts that
are available. This message won't be visible in the UI.
);
console.log(date)}>
{/* ... */}
```
...Or by passing a JSX element
```jsx
console.log(date)}>
I'm a custom screen reader message. I should describe how to interact with
the date picker, playing special attention to the keyboard shortcuts that
are available. This message won't be visible in the UI.
}
/>
{/* ... */}
```
## Props
### `DatePicker`
```js
children: React.ReactNode;
onSelect: (selectedDate: Date) => void;
initialDate?: Date; // Defaults to new Date(Date.now())
minDate?: Date;
maxDate?: Date;
excludeDates?: Date[];
includeDates?: Date[];
locale?: Locale; // date-fns `locale` object
```
> Any props not listed above will be spread onto the underlying `DatePicker` element.
### `DatePickerInput`
```ts
dateFormat?: string; // date-fns `format` string
screenReaderMessage?: JSX.Element | () => JSX.Element;
```
> Any props not listed above will be spread onto the underlying `DatePickerInput` element.
### `DatePickerCalendar`
```ts
children: React.ReactNode;
```
> Any props not listed above will be spread onto the underlying `DatePickerCalendar` element.
### `DatePickerMonth`
```ts
children?: (formattedDate: string) => JSX.Element;
dateFormat?: string; // date-fns `format` string
```
> Any props not listed above will be spread onto the underlying `DatePickerMonth` element.
### `DatePickerButton`
```ts
interface UpdateMonthParams {
prev: () => void;
next: () => void;
}
children: React.ReactNode;
updateMonth: ({ prev, next }: UpdateMonthParams) => void;
```
> Any props not listed above will be spread onto the underlying `DatePickerButton` element.
### `DatePickerTable`
```ts
interface RenderDayLabelParams {
date: Date;
isSelected: boolean;
isSelectable: boolean;
}
renderDayLabel?: ({ date, isSelected, isSelectable }: RenderDayLabelParams) => string;
renderDayContent?: (date: Date) => React.ReactNode;
```
> Any props not listed above will be spread onto the underlying `DatePickerTable` element.
## Styling
`react-datepicker` doesn't provide any default styling; you're free to do what you want and use what you want.
```jsx
// Example using CSS Modules
import * as styles from './styles';
console.log(date)}
>
prev()}
>
Prev Month
next()}
>
Next Month
```
## LICENSE
[MIT](./LICENSE)