Form Date
Form date component.
Form Date, Personalization Blocks
Example:
TallStackUi::personalize() ->form('date') ->block('block', 'classes');
<x-date />
<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="[ ['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()" />
<!--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.
<!--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 />
An option to select only month and year.
<x-date month-year-only />
<x-date x-on:select="alert(`Selected Date: ${$event.detail.date}`)" x-on:clear="alert(`Cleaned!`)" />