Flatpickr

Basic

Basic date picker using flatpickr(input) with default settings.

flatpickr("input[name=basic]");

Date & Time

Date and Time picker with enableTime: true.

flatpickr("input[name=datetime]", {
  enableTime: true,
  dateFormat: "Y-m-d H:i"
});

Human-friendly Format

Displays a user-friendly date format while submitting a standard database format.

flatpickr("input[name=human]", {
  altInput: true,
  altFormat: "F j, Y",
  dateFormat: "Y-m-d"
});

Range Selector

Select a range of dates using mode: "range".

flatpickr("input[name=range]", {
  mode: "range"
});

Inline Calendar

Render the calendar directly on the page instead of an input popover using inline: true.

flatpickr("#inline-calendar", {
  inline: true
});