Date Picker

The <x-wirekit::date-picker> component is a styled wrapper around the native <input type="date">. It uses the browser's built-in calendar popup for zero dependencies and automatic localization to the user's OS locale.

Usage

<x-wirekit::date-picker name="birthdate" value="1990-01-01" />

Width

Like all WireKit form components, the date picker fills its container (w-full). Date fields are typically narrow — constrain the width via the parent element:

<x-wirekit::date-picker name="start_date_narrow" />

<div class="max-w-[12rem]">
    <x-wirekit::date-picker label="Start date" name="start_date" />
</div>

See Input — Width for more layout examples (grid columns, mixed widths).

Date Range

Add the range flag to render a linked start + end pair. Each field is a native date input, and the two are reactively linked — the end can't be set before the start, and the start can't be set after the end. They submit as name[start] and name[end]. Pass an initial range as an array or a YYYY-MM-DD/YYYY-MM-DD string.

<x-wirekit::date-picker label="Trip dates" name="trip" range value="2025-06-10/2025-06-17" />

Range Constraints

<x-wirekit::date-picker name="event" min="2024-01-01" max="2024-12-31" hint="Must be in 2024" />

Error State

<x-wirekit::date-picker label="Date of birth" name="birthdate-error-demo" error="Please enter a valid date" />

Why Native?

The native <input type="date"> gives us:

• Zero dependencies — no JavaScript calendar library to ship
• Automatic localization — calendar renders in the user's OS language and date format
• Full accessibility — arrow keys, PageUp/PageDown for months, Home/End for week boundaries, all work out of the box
• Mobile keyboards — native date wheel on iOS, spinner on Android
• Browser-native parsing — handles timezone and format edge cases

The value is always submitted in YYYY-MM-DD format regardless of the display format.

Optimistic UI

Pass the name of the Livewire method the picker should call and the date lands immediately, then confirms or undoes itself when the server answers:

<x-wirekit::date-picker
    name="due"
    label="Due date"
    :value="$due"
    optimistic="saveDue"
/>

Load wirekit-optimistic.js alongside whichever bundle you already use — below it, in your layout:

@wirekitScripts
<script src="{{ asset('vendor/wirekit/wirekit-optimistic.js') }}"></script>

Try it

The demo below runs the real path: the change shows immediately, the outline says it is provisional, and the server's answer either confirms it silently or takes it back.

{{-- In your app there is no host: your own Livewire component owns the method. --}}
<x-wirekit::date-picker
    name="due"
    label="Due date"
    :value="$due"
    optimistic="saveDue"
/>

The <livewire:demos.…> wrapper above exists only on this site — it supplies the demo methods so the page can show a real round trip. The block under it is what you write.

The prop takes a method name rather than true because the component cannot know the action otherwise: server actions reach a WireKit component through the attribute bag, so it never sees your wire:change. optimistic replaces wire:model.live here rather than joining it — the method you name is what changes the value on the server; pass the current one with :value so the picker knows where it started.

range mode is not covered. A range is two values, so an undo would have to answer what it restores when only one end moved — and the two inputs constrain each other, so rolling one back can leave the other holding a bound that no longer applies. Passing both props gives you the plain range picker rather than a layer applied to half of it.

Props

Accessibility

• Native <input type="date"> — full browser a11y and keyboard support
• aria-invalid="true" and aria-describedby on error
• aria-required="true" when required
• Focus ring and border color tokens adapt to light/dark mode automatically

Keyboard Interaction

Pitfalls

• Don't pass a Carbon\Carbon instance directly. The underlying <input type="date"> expects an ISO string. Use ->format('Y-m-d') before binding, or rely on Livewire's automatic Carbon ↔ string casting.
• Don't disable the dropdown. deliberately ships an HTML5 native picker for accessibility — disabling it sacrifices keyboard-only date entry that screen-reader users depend on.

Design Tokens

Config Defaults

The defaults live in config/wirekit.php under components.date-picker. Override them globally:

'components' => [
    'date-picker' => ['size' => 'md', 'format' => 'Y-m-d'],
],

Further Reading

• MDN: <input type="date">
• Can I Use: input type=date — browser support matrix
• MDN: Date and time input types
• WAI-ARIA: Date Picker Dialog Pattern — for custom calendar UIs (not used here)