@dchimen/react-datepicker
v4.0.2
Published
A simple datepicker component for React. Features localisation, responsive layout, customisable styling and a simple API.
Downloads
11
Maintainers
Readme
React Datepicker
A simple datepicker component for React. Features localisation, responsive layout, customisable styling and a simple API. It is built with Typescript, TailwindCSS, date-fns, weekstart and zustand. See it in action.
Installation
The package can be installed via npm:
npm install @dchimen/react-datepicker --save
Or via pnpm:
pnpm add @dchimen/react-datepicker
Or via yarn:
yarn add @dchimen/react-datepicker
Requirements
The only required dependency for the datepicker to work is React.
Minimum configuration
You must provide a child text input field to the datepicker.
import Datepicker from '@dchimen/react-datepicker';
import '@dchimen/react-datepicker/react-datepicker.css';
export default function App() {
return (
<Datepicker>
<input type="text"></input>
</Datepicker>
);
}
You may provide additional options like so:
<Datepicker
startDate={startDate}
endDate={endDate}
onDateChange={(selectedStartDate, selectedEndDate) => {
setStartDate(selectedStartDate);
setEndDate(selectedEndDate);
}}
/>
Options
| Option | Required type | Description | Default |
| --------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | -------- |
| startDate | Date
| Specify an active date | Date()
|
| startLabel | string
| Specify a label for the startDate | ''
|
| endDate | Date
| This creates a range between the startDate and the specified endDate | null
|
| endLabel | string
| Specify a label for the endDate | ''
|
| minDate | Date
| The minimum selectable date | null
|
| maxDate | Date
| The maximum selectable date | null
|
| title | string
| Renders a custom title | ''
|
| showOtherMonths | Boolean
| When true former and latter date cells are rendered within each calendar | false
|
| showWeekNumbers | Boolean
| When true ISO week numbers will be displayed | false
|
| closeOnSelect | Boolean
| When true and dates are selected, the datepicker will close immediately | false
|
| disabledDates | Date[]
| Disable specific dates | []
|
| labels | See Example | Specify labels for specific dates | null
|
| locale | string
| Sets custom localisation | en-GB
|
| theme | See Example | Pass custom CSS classes to the datepicker | null
|
| onOpen | Function
| A callback function called when the datepicker has been opened | void
|
| onClose | Function
| A callback function called when the datepicker has been closed | void
|
| onDateSelect | Function
| A callback function called when a date has been selected. The startDate and endDate parameters are returned. | void
|
| onDateChange | Function
| A callback function called when the dates have been changed. The startDate and endDate parameters are returned. | void
|
License
Copyright (c) 2023 Daniel Chimen and individual contributors. Licensed under MIT license, see the LICENSE file included for details.