Guides

Installation Upgrade guide Principles Patterns Theming Dark mode Customization Help

Layouts

Header Sidebar

Components

Accordion Autocomplete Avatar

New

Badge Brand

New

Button Breadcrumbs Calendar

New

Callout

New

Card Chart

New

Checkbox Command Context Date picker

New

Dropdown Editor Field Heading Icon Input Modal Navbar Pagination

New

Profile

New

Radio Select Separator Switch Table Tabs Text

New

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.

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.

Copy to clipboard

Range picker

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

Copy to clipboard

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.

Copy to clipboard

Range with inputs

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

Start

End

Copy to clipboard

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

Copy to clipboard

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.

Copy to clipboard

Selectable header

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

Copy to clipboard

Fixed weeks

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

Copy to clipboard

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.

Copy to clipboard

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.

Copy to clipboard

Week numbers

Display the week number for each week.

Copy to clipboard

Localization

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.):

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

Related components

Calendar

Displays a calendar interface for selecting dates

Input

Text fields for collecting user input

Reference

flux:date-picker

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.

flux:date-picker.input

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.

flux:date-picker.button

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.

DateRange Object

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.

Built with by
Caleb Porzio and Hugo Sainte-Marie