TallStackUI, Form Date

# Basic Usage

<x-date />

# Label & Hint

Date

Select your DoB

<x-date label="Date" hint="Select your DoB" />

# Readonly & Disabled

Readonly

Disabled

<x-date label="Readonly" value="2026-08-13" readonly />
<x-date label="Disabled" value="2026-08-13" disabled />

# Available Formats

The tokens the visible input understands

<x-date format="YYYY-MM-DD" />
<x-date format="YYYY, MMMM, DD" />
<x-date format="DD [of] MMMM [of] YYYY" />

The table below lists every token, with what each one produces for 2026-08-07 , a Friday:

Token	Output
`YY`	26
`YYYY`	2026
`M`	8
`MM`	08
`MMM`	Aug
`MMMM`	August
`D`	7
`DD`	07
`d`	5
`dd`	Fr
`ddd`	Fri
`dddd`	Friday
`[text]`	text, escaped from parsing

The formats are applicable only visually. The default backend format will always be YYYY-MM-DD
The default date format sent to the component should be YYYY-MM-DD
Month and weekday names follow the application locale, so MMMM and dddd are translated along with the rest of the calendar.
The time tokens H HH h hh m mm s ss SSS a A Z ZZ are accepted, but a date picker holds no time, so they always render zeros.

Regardless of the format of the date, to send the date to the component you must follow the pattern YYYY-MM-DD . If the date are using a format different than YYYY-MM-DD , the correct thing to do is to use Carbon's createFromFormat . Let's take a look at an example considering the Brazilian date format:

// Your current date
$date = '20/02/2024'; // 20/02/2024
 
// Formatting
$date = now()->createFromFormat('d/m/Y', $date)->format('Y-m-d');
 
// Same date, but now in the correct format
$date; // 2024-02-20

If you are using the component inside Livewire components, you can use the mount method to convert the date. If you are using the component out of Livewire, you can to the same logic in the controller methods before send the variable to the Blade file.

# Helpers

<x-date helpers />

# Min & Max Dates

<!-- You can use dates as strings or Carbon instances -->
 
<x-date :min-date="now()->subWeek()" :max-date="now()->addWeek()" />

# Min & Max Years

<x-date :min-year="2020" :max-year="2024" />

# Disable Dates

<!-- Simple Array -->
<x-date :disable="['2020-01-01','2020-01-02','2020-01-03']" />
 
<!-- Multiple Arrays -->
<x-date :disable="[
    ['2020-01-01','2020-01-02','2020-01-03'],
    ['2020-01-04','2020-01-05','2020-01-06']
]" />
 
<!-- Collection -->
<x-date :disable="collect(['2020-01-01','2020-01-02','2020-01-03'])" />
 
<!-- Carbon Interval -->
<x-date :disable="\Carbon\CarbonInterval::days(1)->toPeriod(now(), now()->addWeek())->toArray()" />

# Disable Specific Days

Only Wednesday

Disable all days other than Wednesday

Only Weekdays

Disable Weekends

Only Weekends

Disable Weekdays

<!--
0: Sunday,
1: Monday,
2: Tuesday,
3: Wednesday,
4: Thursday,
5: Friday,
6: Saturday -->
<x-date only="3" />
 
<!-- Only weekdays, no weekends -->
<x-date weekdays />
 
<!-- Only weekends, no weekdays -->
<x-date weekends />

This feature does not validate the date you pass to the component.

# Range Mode

<!--
The Livewire property must be an array with two positions,
the first one is the start date and the second one is the end date.
 
Property:
public array $date = ['2021-01-01', '2021-01-31'];
 
Usage:
<x-date range wire:model="date" />
-->
 
<x-date range />

Range mode allow the user to select only the start date. In this case the end date will be null.

# Multiple Mode

<!--
The Livewire property must be an array with multiples dates.
 
Property:
public array $date = ['2021-01-01', '2021-01-02', '2021-01-03'];
 
Usage:
<x-date multiple wire:model="date" />
-->
 
<x-date multiple />

# Start Day

An option to set the first day of week.

<!--
0: Sunday, (default)
1: Monday,
2: Tuesday,
3: Wednesday,
4: Thursday,
5: Friday,
6: Saturday -->
 
<x-date start="1" />

You can set the first day of the week for every date picker in the configuration file. The inline attribute always wins, so start="0" keeps Sunday on a single picker. Values outside 0 to 6 throw, including negatives.

# Month Year Only

An option to select only month and year.

<x-date month-year-only />

# Events

<x-date x-on:select="alert(`Selected Date: ${$event.detail.date}`)"
        x-on:clear="alert(`Cleaned!`)" />

Event	Detail	Fired when
`select`	`{ type, date }`	A date is picked
`clear`	`{ type, date }`	The value is cleared

Form Date

Form Date, Customization Blocks