Date Picker

Interactive calendar component for selecting dates

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 add date-picker
pnpm dlx velyx add date-picker
yarn dlx velyx add date-picker
bunx --bun velyx add date-picker

Alpine.js Required: The date picker component requires Alpine.js for interactivity. Make sure Alpine.js is installed in your project.

Usage

Default Date Picker

Loading preview...

Failed to load preview

Code

With Custom Placeholder

Loading preview...

Failed to load preview

Code

Small Size

Loading preview...

Failed to load preview

Code

Large Size

Loading preview...

Failed to load preview

Code

Not Clearable

Loading preview...

Failed to load preview

Code

With Min/Max Dates

Loading preview...

Failed to load preview

Code

Disabled

Loading preview...

Failed to load preview

Code

Props

Prop Type Default Description
placeholder string 'Select a date' Placeholder text shown when no date is selected
disabled boolean false Whether the date picker is disabled
icon string 'calendar' Icon name to display in the input field
clearable boolean true Whether to show a clear button when a date is selected
size string 'md' Size of the input: sm, md, or lg
minDate string null Minimum selectable date (format: YYYY-MM-DD)
maxDate string null Maximum selectable date (format: YYYY-MM-DD)

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