Components
Date picker
Guides
Installation Upgrade guide Principles Patterns Theming Dark mode Customization Help
Layouts
Header Sidebar
Components
Accordion Autocomplete Badge Button Breadcrumbs Calendar
New
Card Chart
New
Checkbox Command Context Date picker
New
Dropdown Editor Field Heading Icon Input Modal Navbar Radio Select Separator Switch Table Tabs Textarea Toast Tooltip
Flux Pro component
This component is only available in the Pro version of Flux.
Upgrade to Pro -> Upgrade to Pro ->

Date picker

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.

Select date
Copy to clipboard

Basic usage

Set the initial selected date using the
value
prop with a
Y-m-d
formatted date string:
Copy to clipboard
You can also bind the selection to a Livewire property using
wire:model
:
Copy to clipboard
Now you can access the selected date from your Livewire component using either a
Carbon
instance or a
Y-m-d
formatted string:
Copy to clipboard

Input trigger

Attach the date picker to a date input for more precise date selection control.

Select date
Log in to view

Range picker

Enable selection of date ranges for reporting, booking systems, or any scenario requiring a start and end date.

Select range
Log in to view
Set the initial range using the
value
prop with a start and end date separated by a forward slash:
Copy to clipboard
You can also bind the selection to a Livewire property using
wire:model
:
Copy to clipboard
Now you can access the selected range from your Livewire component using an associative array of
Y-m-d
formatted date strings:
Copy to clipboard
Alternatively, you can use the specialized
DateRange
object for enhanced functionality:
Copy to clipboard
We highly recommend using the
DateRange
object for range selection, it provides a lot of useful functionality.
Check out everything you can do with the
DateRange
object ->

Range limits

Control the allowed range of dates that can be selected.

Select range
Log in to view
Select range
Log in to view

Range with inputs

Use separate inputs for start and end dates to provide a clearer interface for date range selection.

Start
End
Select range
Log in to view

Presets

Allow users to select from frequently used ranges like "Last 7 days" or "This month".

Today Yesterday This Week Last 7 Days This Month Year to Date All Time Custom
Select range
Log in to view
You can also specify which presets to show, and in which order, using the
presets
prop:
Copy to clipboard

Available presets

Below is a list of all available presets.
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

All time

When using the
allTime
preset, you must specify a minimum date using the
min
prop. This minimum date will be used as the start date of the "All Time" range. Today's date will be used as the end date:
Copy to clipboard
If you need to construct this via the DateRange object from Livewire, you can do so like this:
Copy to clipboard
If you are using this date range to filter data, you may want to remove "where" constraints from the query when
allTime
is selected:
Copy to clipboard

Custom range preset

When a user selects a custom date range that doesn't match any other preset, the picker will automatically switch to the
custom
preset if it is included in the
presets
prop.
Copy to clipboard

With today shortcut

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.
Select date
Log in to view

Selectable header

Enable quick navigation by making the month and year in the header selectable.

Select date
Log in to view

Fixed weeks

Display a consistent number of weeks in every month. Prevents layout shifts when navigating between months with different numbers of weeks.

Select date
Log in to view

Start day

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.

Select date
Log in to view

Open to

Set the date that the calendar will open to. Otherwise, the calendar defaults to the selected date's month, or the current month.

Select date
Log in to view

Week numbers

Display the week number for each week.

Select date
Log in to view

The DateRange object

Flux provides a specialized
Flux\DateRange
object that extends the native
CarbonPeriod
class. This object provides a number of convenience methods to easily create and manage date ranges.
First, it's worth noting that most of the time, you will want to use
wire:model.live
to bind the
range
property to a
DateRange
object. This will automatically update the
range
property whenever the user selects a date range:
Copy to clipboard
Now, in your component, you can type hint the
range
property as a
DateRange
object:
Copy to clipboard

Instantiation

You can initialize a
DateRange
object by passing a start and end date to the
DateRange
constructor from something like the
mount
method:
Copy to clipboard

Persisting to the session

You can persist a
DateRange
object in the user's session by using the
#[Session]
attribute:
Copy to clipboard

Using with Eloquent

You can use the
DateRange
object with Eloquent's
whereBetween()
method to filter queries by date range:
Copy to clipboard

Available methods

The
DateRange
object extends the native
CarbonPeriod
class, so it inherits all of its methods. Here are a few examples:
Copy to clipboard
You can also use it anywhere Eloquent utilities expect a
CarbonPeriod
instance:
Copy to clipboard

Range presets

When using the
presets
prop, the calendar will get/set an associative array of dates as well as a
preset
key:
Copy to clipboard
You can directly get/set the preset string through a simple array binding:
Copy to clipboard
However, the
DateRange
object is equipped to manage the preset internally.
For example, you can create a range using the
lastMonth()
method:
Copy to clipboard
View the complete list of available presets ->
You can access the preset as an enum value via the
preset()
method:
Copy to clipboard
Copyright © 2025 Wireable LLC ·Terms of Service
Built with by
Caleb Porzio and Hugo Sainte-Marie