Flatpickr

OverviewOfficial Website

flatpickr is a lightweight and powerful datetime picker.

Import Package
<!--Flatepicker-->
import Flatpickr from "react-flatpickr";
Add Package
yarn add react-flatpickr --save
Remove Package
yarn remove react-flatpickr or you can remove package by removing specific package from package.json
Flatpickr Examples
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"
    }}
/>
Timepickr Examples
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,
    }}
/>
© Hybrix.
Design & Develop by Themesbrand