Powerful suite of Blade components for TALL Stack apps.

Form Date

>= v1.20

Form date component.

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

Support for all Day.js formats

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

  • You can use all Day.js formats.
  • 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

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.

<x-date helpers />
<!-- You can use dates as strings or Carbon instances -->
<x-date :min-date="now()->subWeek()"
:max-date="now()->addWeek()" />
<x-date :min-year="2020" :max-year="2024" />
<!-- Simple Array -->
<x-date :disable="['2020-01-01','2020-01-02','2020-01-03']" />
<!-- Multiple Arrays -->
<x-date :disable="[
]" />
<!-- 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()" />
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.
public array $date = ['2021-01-01', '2021-01-31'];
<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.

The Livewire property must be an array with multiples dates.
public array $date = ['2021-01-01', '2021-01-02', '2021-01-03'];
<x-date multiple wire:model="date" />
<x-date multiple />
<x-date x-on:select="alert(`Selected Date: ${$event.detail.date}`)"
x-on:clear="alert(`Cleaned!`)" />

An option to not show validation error message.

<x-date invalidate />

Code highlighting provided by Torchlight