flatpickr-react

React Wrapper for Flatpickr.js

This package provides a React wrapper for the popular date and time picker library, Flatpickr.js. It allows you to easily integrate Flatpickr into your React applications with a variety of customizable options and hooks with typescript support and fully tested functionality.

Installation

To install the package, use npm or yarn:

npm install flatpickr flatpickr-react

or

yarn add flatpickr flatpickr-react

Usage

Basic Usage

To use the DateTimePicker component, import it into your React component and include it in your JSX:

import React, { useState } from "react";
import DateTimePicker from "flatpickr-react";
import "flatpickr/dist/flatpickr.css";

function App() {
	const [date, setDate] = (useState < Date) | (null > null);

	return (
		<div>
			<DateTimePicker
				options={{
					dateFormat: "Y-m-d",
				}}
				value={date}
				onChange={(selectedDate: Date) => {
					setDate(selectedDate);
				}}
			/>
			<p>Selected Date: {date ? date.toString() : "None"}</p>
		</div>
	);
}

export default App;

Props

The DateTimePicker component accepts the following props:

• defaultValue: The default value of the input.
• options: Flatpickr options object.
• locale: Locale settings for Flatpickr.
• plugins: Array of Flatpickr plugins.
• onChange: Callback function for the onChange event.
• onOpen: Callback function for the onOpen event.
• onClose: Callback function for the onClose event.
• onMonthChange: Callback function for the onMonthChange event.
• onYearChange: Callback function for the onYearChange event.
• onReady: Callback function for the onReady event.
• onValueUpdate: Callback function for the onValueUpdate event.
• onDayCreate: Callback function for the onDayCreate event.
• value: The current value of the input.
• className: Custom class name for the input.
• children: Custom children elements.
• render: Custom render function for the input.
• onCreate: Callback function for when the Flatpickr instance is created.
• onDestroy: Callback function for when the Flatpickr instance is destroyed.

Examples

Example 1: Basic Date Picker

<DateTimePicker
  options={{
    dateFormat: 'Y-m-d',
  }}
/>

Example 2: Date and Time Picker

<DateTimePicker
  options={{
    enableTime: true,
    dateFormat: 'Y-m-d H:i',
  }}
/>

Example 3: Range Picker

<DateTimePicker
  options={{
    mode: 'range',
    dateFormat: 'Y-m-d',
  }}
/>

Example 4: Multiple Dates Picker

<DateTimePicker
  options={{
    mode: 'multiple',
    dateFormat: 'Y-m-d',
  }}
/>

Example 5: Custom Locale

import { Spanish } from 'flatpickr/dist/l10n/es';

<DateTimePicker
  options={{
    dateFormat: 'Y-m-d',
  }}
  locale={Spanish}
/>;

Example 6: Custom Render Function

<DateTimePicker
  render={(props, ref) => (
    <div className="custom-wrapper">
      <label>Select Date:</label>
      <button {...props} ref={ref}>
        Pick a date
      </button>
    </div>
  )}
/>

Example 7: Event Callbacks

<DateTimePicker
  onOpen={() => console.log('Opened')}
  onClose={() => console.log('Closed')}
  onChange={(selectedDates) => console.log('Date changed', selectedDates)}
  onMonthChange={(selectedDates, dateStr, instance) => console.log('Month changed')}
  onYearChange={(selectedDates, dateStr, instance) => console.log('Year changed')}
  onReady={(selectedDates, dateStr, instance) => console.log('Ready')}
  onValueUpdate={(selectedDates, dateStr, instance) => console.log('Value updated')}
  onDayCreate={(selectedDates, dateStr, instance, dayElement) => console.log('Day created')}
/>

Example 8: Custom Position

<DateTimePicker
  options={{
    position: 'top',
  }}
/>

Example 9: Render Calander Without Input Element

<DateTimePicker
  options={{
    inline: true,
    dateFormat: 'Y-m-d',
  }}
/>

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any bugs or feature requests.

Acknowledgements

• Flatpickr.js
• React

---

Feel free to customize the README file further to match your specific needs and preferences.