@dchimen/react-datepicker NPM

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`