Allow users to select dates or date ranges via a calendar overlay. Perfect for filtering data or scheduling events.
Use date inputs instead of date pickers for far-future or past events such as birthdates.
Attach the date picker to a date input for more precise date selection control.
Enable selection of date ranges for reporting, booking systems, or any scenario requiring a start and end date.
Control the allowed range of dates that can be selected.
Use separate inputs for start and end dates to provide a clearer interface for date range selection.
Allow users to select from frequently used ranges like "Last 7 days" or "This month".
Key
|
Label
|
Constructor
|
Date Range
|
---|---|---|---|
today | Today | DateRange::today() | Current day |
yesterday | Yesterday | DateRange::yesterday() | Previous day |
thisWeek | This Week | DateRange::thisWeek() | Current week |
lastWeek | Last Week | DateRange::lastWeek() | Previous week |
last7Days | Last 7 Days | DateRange::last7Days() | Previous 7 days |
thisMonth | This Month | DateRange::thisMonth() | Current month |
lastMonth | Last Month | DateRange::lastMonth() | Previous month |
thisQuarter | This Quarter | DateRange::thisQuarter() | Current quarter |
lastQuarter | Last Quarter | DateRange::lastQuarter() | Previous quarter |
thisYear | This Year | DateRange::thisYear() | Current year |
lastYear | Last Year | DateRange::lastYear() | Previous year |
last14Days | Last 14 Days | DateRange::last14Days() | Previous 14 days |
last30Days | Last 30 Days | DateRange::last30Days() | Previous 30 days |
last3Months | Last 3 Months | DateRange::last3Months() | Previous 3 months |
last6Months | Last 6 Months | DateRange::last6Months() | Previous 6 months |
yearToDate | Year to Date | DateRange::yearToDate() | January 1st to today |
allTime | All Time | DateRange::allTime($start) | Minimum supplied date to today |
custom | Custom Range | DateRange::custom() | User-defined date range |
Add a shortcut button to quickly navigate to today's date. When viewing a different month, it jumps to the current month. When already viewing the current month, it selects today's date.
Enable quick navigation by making the month and year in the header selectable.
Display a consistent number of weeks in every month. Prevents layout shifts when navigating between months with different numbers of weeks.
By deafult the first day of the week will be automatically set based on the user's locale. You can override this by setting the start-day attribute to any day of the week.
Set the date that the calendar will open to. Otherwise, the calendar defaults to the selected date's month, or the current month.
By default, the date picker will use the browser's locale (e.g. navigator.language).
You can override this behavior by setting the locale attribute to any valid locale string (e.g. fr for French, en-US for English, etc.):
Prop
|
Description
|
---|---|
wire:model |
Binds the date picker to a Livewire property. See the wire:model documentation for more information.
|
name |
Name attribute for the date picker. Automatically set when using wire:model.
|
value |
Selected date(s). Format depends on mode: single date (Y-m-d) or range (Y-m-d/Y-m-d).
|
mode |
Selection mode. Options: single (default), range.
|
min-range |
Minimum number of days that can be selected in range mode.
|
max-range |
Maximum number of days that can be selected in range mode.
|
min |
Earliest selectable date. Can be a date string or "today".
|
max |
Latest selectable date. Can be a date string or "today".
|
months |
Number of months to display. Default: 1 in single mode, 2 in range mode.
|
label |
Label text displayed above the date picker. When provided, wraps the component in a flux:field with an adjacent flux:label.
|
description |
Help text displayed below the date picker. When provided alongside label, appears between the label and date picker within the flux:field wrapper.
|
description:trailing |
The description provided will be displayed below the date picker instead of above it.
|
badge |
Badge text displayed at the end of the flux:label component when the label prop is provided.
|
placeholder |
Placeholder text displayed when no date is selected. Default depends on mode.
|
size |
Size of the calendar day cells. Options: sm, default, lg, xl, 2xl.
|
week-numbers |
If true, displays week numbers in the calendar.
|
selectable-header |
If true, displays month and year dropdowns for quick navigation.
|
with-today |
If true, displays a button to quickly navigate to today's date.
|
with-inputs |
If true, displays date inputs at the top of the calendar for manual date entry.
|
with-confirmation |
If true, requires confirmation before applying the selected date(s).
|
with-presets |
If true, displays preset date ranges. Use with presets to customize available options.
|
presets |
Space-separated list of preset date ranges to display. Default: today yesterday thisWeek last7Days thisMonth yearToDate allTime.
|
clearable |
Displays a clear button when a date is selected.
|
disabled |
Prevents user interaction with the date picker.
|
invalid |
Applies error styling to the date picker.
|
locale |
Set the locale for the date picker. Examples: fr, en-US, ja-JP.
|
Slot
|
Description
|
---|---|
trigger |
Custom trigger element to open the date picker. Usually a flux:date-picker.input or flux:date-picker.button.
|
Attribute
|
Description
|
---|---|
data-flux-date-picker |
Applied to the root element for styling and identification.
|
Prop
|
Description
|
---|---|
label |
Label text displayed above the input. When provided, wraps the input in a flux:field component with an adjacent flux:label component.
|
description |
Help text displayed below the input. When provided alongside label, appears between the label and input within the flux:field wrapper.
|
placeholder |
Placeholder text displayed when no date is selected.
|
format |
Date format string for display. Default: localized format.
|
clearable |
Displays a clear button when a date is selected.
|
disabled |
Prevents user interaction with the input.
|
invalid |
Applies error styling to the input.
|
Prop
|
Description
|
---|---|
placeholder |
Text displayed when no date is selected.
|
size |
Size of the button. Options: sm, xs.
|
clearable |
Displays a clear button when a date is selected.
|
disabled |
Prevents user interaction with the button.
|
invalid |
Applies error styling to the button.
|
A specialized object for handling date ranges when using mode="range".
Method
|
Description
|
---|---|
$range->start() |
Get the start date as a Carbon instance.
|
$range->end() |
Get the end date as a Carbon instance.
|
$range->days() |
Get the number of days in the range.
|
$range->preset() |
Get the current preset as a DateRangePreset enum value.
|
$range->toArray() |
Get the range as an array with start and end keys.
|
Static Method
|
Description
|
---|---|
DateRange::today() |
Create a DateRange for today.
|
DateRange::yesterday() |
Create a DateRange for yesterday.
|
DateRange::thisWeek() |
Create a DateRange for the current week.
|
DateRange::lastWeek() |
Create a DateRange for the previous week.
|
DateRange::last7Days() |
Create a DateRange for the last 7 days.
|
DateRange::last30Days() |
Create a DateRange for the last 30 days.
|
DateRange::thisMonth() |
Create a DateRange for the current month.
|
DateRange::lastMonth() |
Create a DateRange for the previous month.
|
DateRange::thisQuarter() |
Create a DateRange for the current quarter.
|
DateRange::lastQuarter() |
Create a DateRange for the previous quarter.
|
DateRange::thisYear() |
Create a DateRange for the current year.
|
DateRange::lastYear() |
Create a DateRange for the previous year.
|
DateRange::yearToDate() |
Create a DateRange from January 1st to today.
|
DateRange::allTime() |
Create a DateRange with no limits.
|