DatePicker Component

A powerful and flexible date/time picker component built on Flatpickr. Supports multiple date selection modes, themes, localization, and extensive customization options.

Basic Props

• name - string (required) - Input name
• label - string - Label text
• value - string - Default value
• placeholder - string - Placeholder text
• id - string|null - Custom ID
• hint - string - Helper text

Type & Format

• type - string - 'date' | 'datetime' | 'time' | 'range' | 'multiple'
• format - string - Custom date format (e.g., 'd/m/Y', 'F j, Y')
• defaultDate - string - Default selected date

Date Constraints

• minDate - string - Minimum selectable date
• maxDate - string - Maximum selectable date
• disable - array - Dates to disable
• enable - array - Only enable these dates

Time Options

• enableTime - bool - Enable time selection
• time24hr - bool - 24-hour format
• timeFormat - string - Custom time format
• enableSeconds - bool - Show seconds
• noCalendar - bool - Time only, no calendar
• hourIncrement - int - Hour step (e.g., 2)
• minuteIncrement - int - Minute step (e.g., 15)
• defaultHour - int - Default hour (0-23)
• defaultMinute - int - Default minute (0-59)
• minTime - string - Minimum time (e.g., '09:00')
• maxTime - string - Maximum time (e.g., '18:00')

Display Options

• size - string - 'sm' | 'lg' | null
• icon - string|null - FontAwesome icon name
• iconPosition - string - 'left' | 'right'
• theme - string|null - Theme name or 'auto'
• locale - string|null - Locale code (e.g., 'tr', 'de', 'fr')
• altInput - bool - Show alternative readable input
• altFormat - string - Format for alt input
• inline - bool - Inline calendar
• static - bool - Static calendar
• weekNumbers - bool - Show week numbers
• position - string - 'auto' | 'above' | 'below'

Behavior Options

• allowInput - bool - Allow manual input (default: true)
• clickOpens - bool - Open on click (default: true)
• disableMobile - bool - Disable native mobile picker

States

• error - bool - Error state
• errorMessage - string - Error message
• disabled - bool - Disabled state
• readonly - bool - Readonly state
• required - bool - Required field

Advanced

• options - array - Flatpickr advanced options

Available Themes

• • light - Default light theme
• • dark - Dark theme
• • material_blue - Material Blue
• • material_green - Material Green
• • material_orange - Material Orange
• • material_red - Material Red
• • airbnb - Airbnb theme
• • confetti - Confetti theme
• • auto - Auto (dark/light based on system)

Date Format Examples

• • Y-m-d - 2024-12-25
• • d/m/Y - 25/12/2024
• • F j, Y - December 25, 2024
• • Y-m-d H:i - 2024-12-25 14:30
• • h:i K - 02:30 PM

Common Use Cases

<x-datepicker name="date" label="Select Date" />

<x-datepicker name="range" type="range" label="Date Range" />

<x-datepicker 
    name="datetime" 
    type="datetime" 
    min-date="today" 
    min-time="09:00" 
    max-time="18:00" 
    label="Business Hours" 
/>

<x-datepicker name="date" locale="tr" label="Tarih Seçin" />