Date Picker
Allow users to select dates or date ranges via a calendar overlay. Perfect for filtering data or scheduling events.
Basic Usage
A simple date picker input that opens a calendar on click.
<neura::date-picker />With Label and Description
Wrap it in a field component to add labels and descriptions.
Event Date
Pick a date for your upcoming event.
<neura::field>
<neura::label>Event Date</neura::label>
<neura::date-picker placeholder="Select an event date" />
<neura::description>Pick a date for your upcoming event.</neura::description>
</neura::field>Date Constraints
You can restrict the selection using `minDate`, `maxDate`, and `disabledDates`.
Appointment (Next 7 days only)
<neura::date-picker
:min-date="now()->toDateString()"
:max-date="now()->addDays(7)->toDateString()"
:disabled-dates="[now()->addDays(2)->toDateString()]"
/>Range Selection
Enable range selection to allow users to pick a start and end date.
Vacation Period
<neura::date-picker range placeholder="Select period" />Multiple Selection
Allow users to pick multiple individual dates.
Available Dates
<neura::date-picker multiple placeholder="Select dates" />Livewire Integration
The date picker works seamlessly with Livewire `wire:model`.
<!-- Single Date -->
<neura::date-picker wire:model="date" />
<!-- Date Range -->
<neura::date-picker range wire:model="dateRange" />
<!-- $dateRange will be ['start' => '...', 'end' => '...'] -->
<!-- Multiple Dates -->
<neura::date-picker multiple wire:model="selectedDates" />
<!-- $selectedDates will be ['...', '...'] -->Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | null | Name attribute for form submission |
| value | string|array | null | Initial value |
| placeholder | string | 'Select date' | Input placeholder text |
| minDate | string | null | Minimum selectable date (YYYY-MM-DD) |
| maxDate | string | null | Maximum selectable date (YYYY-MM-DD) |
| disabled | boolean | false | Disable the input |
| range | boolean | false | Enable range selection mode |
| multiple | boolean | false | Enable multiple selection mode |