Date picker

61 · Forms

Shows the browser's own date and time picker in the panel style. Because it is built on acun:input, the label, hint and error display are the same. To pick a date range, the flatpickr-based uiDateRangePicker is used.

PRO acun:date-picker

Basic usage

The default type is date. value is always given in YYYY-MM-DD format; on screen it is shown according to the user's browser language (in Turkish, 07.10.2026).

LIVE EXAMPLE

<acun:date-picker name="delivery_date" label="Delivery date" value="2026-10-07" hint="The day emailed to the customer." />

Prop	Values
`value`	YYYY-MM-DD
`label, hint`	Same as acun:input

Types

With type, you can pick a date and time, a time only or a month. Each type has a different value format; see the table below.

LIVE EXAMPLE

<acun:date-picker name="day" label="Day" value="2026-10-07" />
<acun:date-picker name="appointment" type="datetime-local" label="Appointment" value="2026-10-07T09:30" />
<acun:date-picker name="time" type="time" label="Time" value="09:30" />
<acun:date-picker name="period" type="month" label="Period" value="2026-10" />

Prop	Values
`type`	date \| datetime-local \| time \| month
`value`	YYYY-MM-DD · YYYY-MM-DDTHH:MM · HH:MM · YYYY-MM

Earliest and latest date

The min and max attributes are passed directly to the field; the browser does not allow days outside this range to be picked. The values are written in the same format as value.

LIVE EXAMPLE

<acun:date-picker name="october_delivery" label="Delivery date" min="2026-10-01" max="2026-10-31" hint="Only a day in October 2026." />

Prop	Values
`min`	First value that can be picked
`max`	Last value that can be picked

Date range

To let users pick the start and end day in a single field, wrap the field in the uiDateRangePicker Alpine component and give the field x-ref="input". The field shows dates as dd.mm.yyyy; on wide screens two months open side by side. When both days are picked, the date-range-picked event is dispatched with { start, end } (Y-m-d); on pages without Livewire, get the selection from this event. Try it by picking two days in the calendar.

LIVE EXAMPLE

<div x-data="{ range: null }" x-on:date-range-picked="range = $event.detail" class="space-y-2">
    <div x-data="uiDateRangePicker()">
        <acun:input x-ref="input" label="Report period" readonly />
    </div>
    <p class="text-sm text-gray-600 dark:text-zinc-400" x-text="range ? 'Selected range: ' + range.start + ' – ' + range.end : 'Pick a start day and an end day.'"></p>
</div>

Prop	Values
`date-range-picked`	Event dispatched when the range is complete: { start, end }

With Livewire

Inside a Livewire component, the selected range is also written to the component's startDate and endDate properties in Y-m-d format. Give the initially selected range in the same properties; add wire:ignore to the container so Livewire updates do not break the calendar.

BLADE

{{-- In the Livewire component: public ?string $startDate = null; public ?string $endDate = null; --}}
<div wire:ignore x-data="uiDateRangePicker({ startDate: @js($startDate), endDate: @js($endDate) })">
    <acun:input x-ref="input" label="Report period" readonly />
</div>

Prop	Values
`startDate, endDate`	Initially selected range (Y-m-d)

Range options

By default every day can be picked; where only future dates should be picked, such as reservations, give minDate: 'today'. disabledRanges sets the days that cannot be picked. In Livewire, you can change the names of the properties the values are written to with startProperty / endProperty.

BLADE

<div wire:ignore x-data="uiDateRangePicker({
    startDate: @js($start),
    endDate: @js($end),
    minDate: 'today',
    disabledRanges: [{ from: '2026-12-25', to: '2027-01-01' }],
    startProperty: 'start',
    endProperty: 'end',
})">
    <acun:input x-ref="input" label="Leave period" readonly />
</div>

Prop	Values
`minDate`	'today' \| null \| 'YYYY-MM-DD'
`disabledRanges`	Closed days: dates or { from, to } ranges
`startProperty, endProperty`	Properties to write to ('startDate', 'endDate')

Installation

flatpickr is not included in the package; install it in your application and pass it, together with its Turkish locale, to registerDateRangePicker through the PRO JS entry @acunsoft/acun-ui-pro (the Vite alias from the CSS, JavaScript and build guide). On pages without Livewire, run the same line on the alpine:init event.

import flatpickr from 'flatpickr';
import { Turkish } from 'flatpickr/dist/l10n/tr.js';
import 'flatpickr/dist/flatpickr.min.css';
import { registerDateRangePicker } from '@acunsoft/acun-ui-pro';

document.addEventListener('livewire:init', () => registerDateRangePicker(Alpine, flatpickr, Turkish));

API

Props and slots

The values the component accepts.

Prop	Default	Description
`label`	`null`	Label above the field
`name`	`null`	Field name; otherwise the wire:model value
`hint`	`null`	Help text below
`type`	`date`	date · datetime-local · time · month
`uiDateRangePicker: startDate, endDate`	`''`	Initially selected range (Y-m-d)
`uiDateRangePicker: minDate`	`null`	First day that can be picked; 'today' closes past days
`uiDateRangePicker: disabledRanges`	`[]`	Days that cannot be picked (flatpickr disable format)
`uiDateRangePicker: startProperty, endProperty`	`'startDate', 'endDate'`	Properties the selection is written to in the Livewire component
`uiDateRangePicker: date-range-picked`	—	Event dispatched when the range is complete; detail: { start, end } (Y-m-d)

Slots: Attributes such as value, min, max, required and disabled are added to the field through acun:input.