Flatpickr Date Picker Demo

A lightweight, powerful JavaScript datetime picker with no dependencies. Click any input below the examples to see the calendar in action — everything on this site runs locally in your browser using the real flatpickr v4.6.13 build.

Open the full live demo Read the guide

Why developers pick flatpickr

Lightweight & dependency-free — no jQuery, no moment.js; the minified JS is about 50 KB.
Date, time, range & multiple selection out of the box.
Inline calendar mode, human-friendly display formats, min/max limits and disabled dates.
51 locales and 8 themes (including dark and material styles), plus a plugin system.

Examples

Basic date picker

The classic single-date calendar popup.

Try it →

Date range

Select a start and end date in one picker (range mode / range plugin).

Try it →

Time picker

Time-only selection with 24-hour or 12-hour formats.

Try it →

Inline calendar

An always-visible calendar embedded in the page.

Try it →

Multiple dates

Pick several individual dates in a single input.

Try it →

Date & time

Combined datetime picker with time controls.

Try it →

Getting started

Include the stylesheet and script, then initialise flatpickr on any input:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<input class="my-date" placeholder="Select date...">
<script>
  flatpickr(".my-date", {});
</script>

On this demo site the same files are served locally from /dist/flatpickr.min.css and /dist/flatpickr.min.js, so every example works offline once the page loads. See the guide for common options, or open the full demo page to try all modes on one page.