flatpickr an extensible date time picker for react
npm install flatpickr-reactThis 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.
To install the package, use npm or yarn:
``bash`
npm install flatpickr flatpickr-react
or
`bash`
yarn add flatpickr flatpickr-react
To use the DateTimePicker component, import it into your React component and include it in your JSX:
`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 (
Selected Date: {date ? date.toString() : "None"}
export default App;
`
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.
#### Example 1: Basic Date Picker
`jsx`
dateFormat: 'Y-m-d',
}}
/>
#### Example 2: Date and Time Picker
`jsx`
enableTime: true,
dateFormat: 'Y-m-d H:i',
}}
/>
#### Example 3: Range Picker
`jsx`
mode: 'range',
dateFormat: 'Y-m-d',
}}
/>
#### Example 4: Multiple Dates Picker
`jsx`
mode: 'multiple',
dateFormat: 'Y-m-d',
}}
/>
#### Example 5: Custom Locale
`jsx
import { Spanish } from 'flatpickr/dist/l10n/es';
dateFormat: 'Y-m-d',
}}
locale={Spanish}
/>;
`
#### Example 6: Custom Render Function
`jsx`
)}
/>
#### Example 7: Event Callbacks
`jsx`
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
`jsx`
position: 'top',
}}
/>
#### Example 9: Render Calander Without Input Element
`jsx``
inline: true,
dateFormat: 'Y-m-d',
}}
/>
This project is licensed under the MIT License. See the LICENSE file for details.
Contributions are welcome! Please open an issue or submit a pull request for any bugs or feature requests.
---
Feel free to customize the README file further to match your specific needs and preferences.