Flatpickr | Velzon - React Js Admin & Dashboard Template Documentation

flatpickr is a lightweight and powerful datetime picker.

<!--Flatepicker-->
import Flatpickr from "react-flatpickr";

yarn add react-flatpickr --save

yarn remove react-flatpickr ( you can remove package by removing specific package from package.json )

Title	HTML
Basic	`<Flatpickr className="form-control" options={{ dateFormat: "d M, Y" }} />`
DateTime	`<Flatpickr className="form-control" options={{ enableTime: true, dateFormat: "Y-m-d H:i", }} />`
Human-Friendly Dates	`<Flatpickr className="form-control" options={{ altFormat: "F j, Y", dateFormat: "Y-m-d", }} />`
MinDate and MaxDate	`<Flatpickr className="form-control" options={{ minDate: "today", maxDate: new Date().fp_incr(14) }} />`
Default Date	`<Flatpickr className="form-control" options={{ dateFormat: "Y-m-d", defaultDate: ["2022-01-20"] }} />`
Disabling Dates	`<Flatpickr className="form-control" options={{ disable: ["2022-01-30", "2022-02-21", "2022-03-08", new Date(2025, 4, 9)], dateFormat: "Y-m-d", }} />`
Selecting Multiple Dates	`<Flatpickr className="form-control" options={{ mode: "multiple", dateFormat: "Y-m-d" }} />`
Range	`<Flatpickr className="form-control" options={{ mode: "range", dateFormat: "Y-m-d" }} />`
Inline	`<Flatpickr className="form-control" options={{ inline: true, dateFormat: "Y-m-d" }} />`

Title	HTML
Basic Timepicker	`<Flatpickr className="form-control" options={{ enableTime: true, noCalendar: true, dateFormat: "H:i", }} />`
24-hour Time Picker	`<Flatpickr className="form-control" options={{ enableTime: true, noCalendar: true, dateFormat: "H:i", time_24hr: true }} />`
Time Picker w/ Limits	`<Flatpickr className="form-control" options={{ enableTime: true, noCalendar: true, dateFormat: "H:i", minTime: "16:00", maxTime: "22:30", }} />`
Preloading Time	`<Flatpickr className="form-control" options={{ enableTime: true, noCalendar: true, dateFormat: "H:i", defaultDate: "13:45" }} />`
Inline	`<Flatpickr className="form-control" options={{ enableTime: true, noCalendar: true, inline: true, }} />`