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.