Form Date

>= v1.20

Form date component.

Date, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

TallStackUi::personalize()
    ->form('date')
    ->block('block', 'classes');

The soft personalization should be done in boot method of service providers.

# Basic Usage

<x-date />

# Label & Hint

Date

Select your DoB

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

# Available Formats

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.

# 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()" />

# 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 />

# Month Year Only NEW

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!`)" />

# Invalidate

An option to not show validation error message.

<x-date invalidate />