keyboard_double_arrow_left
help Help & getting started
  1. Home
  2. Flatpickr

Flatpickr.

Flatpickr is a lightweight and powerful datetime picker library written in JavaScript. It enables developers to easily add user-friendly date and time selection interfaces to their web applications with minimal overhead and high customizability. Click here

Basic Example

flatpickr without any config.


<label class="form-label">Default Input</label>
<input type="text" class="form-control" placeholder="Select Date.." id="defaultFlatpickr">

DateTime

Allows users to select date and time.


<label class="form-label">Choose Your Date and Time</label>
<input type="text" class="form-control" placeholder="Select Date.." id="dateTimeFlatpickr">

Time only

Enables time selection without requiring a date input.


<label class="form-label">Choose Your Time</label>
<input type="text" class="form-control" placeholder="Select Date.." id="timeFlatpickr">

Display Week Numbers

Enable the weekNumbers option to display the week number in a column left to the calendar.


<label class="form-label">Choose Your Time</label>
<input type="text" class="form-control" placeholder="Select Date.." id="weekNumbersFlatpickr">

Localization

Adjust language and regional formats for a localized user experience.


<label class="form-label">Choose Your Date and Time</label>
<input type="text" class="form-control" placeholder="Select Date.." id="localeFlatpickr">

Range Calendar

Select a range of dates using the range calendar.


<label class="form-label">Choose Your Time</label>
<input type="text" class="form-control" placeholder="Select Date.." id="rangeCalendarFlatpickr">

Selecting multiple dates

It is possible to select multiple dates.


<label class="form-label">Choose Your Time</label>
<input type="text" class="form-control" placeholder="Select Date.." id="multipleDatesFlatpickr">