Date Picker

Interactive calendar popover date selection control with default friendly date formatting.

Component Syntax

blade

<x-aura::date-picker wire:model="publishDate" label="Publish Date" format="MMMM D, YYYY" />

1. Standard Date Picker

blade

Scheduled Launch Date

<x-aura::date-picker label="Scheduled Launch Date" value="2026-05-04" name="launch_date" />

2. Display Formatting Variants

blade

ISO Standard Format

European Slash Format

Abbreviated Month Format

<x-aura::date-picker label="ISO Standard" value="2026-05-04" format="YYYY-MM-DD" />
<x-aura::date-picker label="European Slash" value="2026-05-04" format="DD/MM/YYYY" />
<x-aura::date-picker label="Abbreviated Month" value="2026-05-04" format="MMM D, YYYY" />

3. Event Schedule Range Form

blade

Conference Schedule Window

Start Date

End Date

<x-aura::card size="2xl" padding="xl" gap="6">
    <x-aura::heading level="3" size="md">
        Conference Schedule Window
    </x-aura::heading>

    <x-aura::grid cols="2" gap="4">
        <x-aura::date-picker wire:model="startDate" label="Start Date" />
        <x-aura::date-picker wire:model="endDate" label="End Date" />
    </x-aura::grid>
</x-aura::card>

Component Props

Available properties and configurations for the date picker component.

Prop	Default	Available Values
format	MMMM D, YYYY	MMMM D, YYYY YYYY-MM-DD DD/MM/YYYY
label	null	Label string

Aura Wire

Component Library

Date Picker

Component Syntax

1. Standard Date Picker

2. Display Formatting Variants

3. Event Schedule Range Form

Conference Schedule Window

Component Props

Combobox

Checkbox

Aura Wire