Flatpickr Sample Component

This is a sample Flatpickr component that can be reused throughout the application. It demonstrates various date picker configurations with automatic theme switching and modern styling.

Single Date Selection

Basic date picker with calendar popup

Select Date

Selected: None

Date Range Selection

Select start and end dates

Select Date Range

Range: None selected

Time Selection

Time picker with 24-hour format

Select Time

Time: None

DateTime Selection

Combined date and time picker

Select Date & Time

DateTime: None

Advanced Features

Demonstration of various Flatpickr capabilities

Interactive

Inline Calendar

Selected: None

Multiple Dates

Count: 0

With Week Numbers

Week: None

25KB

Library Size

Zero

Dependencies

100%

Vanilla JS