Date Picker

The Date Picker component provides an interactive calendar interface for selecting dates with support for min/max dates, size variations, and clear functionality.

Installation

Add the date picker component to your project:

npx velyx@latest add date-picker

pnpm dlx velyx@latest add date-picker

yarn dlx velyx@latest add date-picker

bunx --bun velyx@latest add date-picker

Usage

Default Date Picker

<x-ui.date-picker />

With Custom Placeholder

<x-ui.date-picker placeholder="Choose your birthday" />

Small Size

<x-ui.date-picker size="sm" />

Large Size

<x-ui.date-picker size="lg" />

Not Clearable

<x-ui.date-picker :clearable="false" />

With Min/Max Dates

<x-ui.date-picker
        placeholder="Select a date in 2026"
        :clearable="true"
        min-date="2026-01-01"
        max-date="2026-12-31"
    />

Disabled

<x-ui.date-picker :disabled="true" />

Props

Examples

Basic Usage

<x-ui.date-picker />

With Placeholder

<x-ui.date-picker placeholder="Select your birthdate" />

With Size Variations

<x-ui.date-picker size="sm" />
<x-ui.date-picker size="md" />
<x-ui.date-picker size="lg" />

Without Clear Button

<x-ui.date-picker :clearable="false" />

With Date Range

<x-ui.date-picker
    min-date="2026-01-01"
    max-date="2026-12-31"
    placeholder="Select a date in 2026"
/>

Disabled State

<x-ui.date-picker :disabled="true" />

With Livewire

<x-ui.date-picker wire:model="birthdate" />

Controlled with Alpine.js

<div x-data="{ date: '2026-03-15' }">
    <x-ui.date-picker x-model="date" />

    <p>Selected: <span x-text="date"></span></p>
</div>

Form Integration

<form method="POST" action="{{ route('profile.update') }}">
    @csrf

    <div class="space-y-4">
        <div>
            <label for="birthdate">Birthdate</label>
            <x-ui.date-picker
                id="birthdate"
                name="birthdate"
                placeholder="Select your birthdate"
                max-date="{{ now()->subYears(18)->format('Y-m-d') }}"
            />
        </div>

        <button type="submit">Save</button>
    </div>
</form>

Accessibility

The Date Picker component includes keyboard navigation and ARIA attributes:

• Tab: Focus the date picker input
• Enter/Space: Open the calendar dropdown
• Escape: Close the calendar dropdown
• Arrow Keys: Navigate between months (when calendar is open)
• Click: Select a date from the calendar
• Proper ARIA roles and labels for screen readers
• Today button for quick navigation to current date

Styling

The date picker uses Tailwind CSS utility classes and can be customized:

Input Styling

The input field uses standard form classes:

• Border: border-input
• Background: bg-background
• Focus ring: focus:ring-2 focus:ring-ring
• Sizes: h-8 (sm), h-10 (md), h-12 (lg)

Calendar Styling

The calendar popup uses:

• Background: bg-popover
• Border: border-border
• Shadow: shadow-lg
• Selected date: bg-primary text-primary-foreground
• Today's date: ring-1 ring-primary
• Disabled dates: opacity-30 cursor-not-allowed

Notes

• The component uses Alpine.js for state management and interactivity
• Date format is YYYY-MM-DD for min/max dates
• The calendar displays days from Monday to Sunday
• Today's date is highlighted with a ring indicator
• Selected dates use the primary color scheme
• Click outside the calendar to close it
• Press Escape to close the calendar

Next Steps

• Explore Input component
• Learn about Form components
• View Dialog component