Date Picker

This component is a wrapper around flatpickr, for more details refer to its docs.

For native date time selection see Date Time component.

Install

<head>
...
 
{{-- Flatpickr --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
</head>

Usage

See all $config options at flatpickr`s docs.

Date
Hi!
Alt
Range
@php
$config1 = ['altFormat' => 'm/d/Y'];
$config2 = ['mode' => 'range'];
@endphp
 
<x-datepicker label="Date" wire:model="myDate1" icon="o-calendar" hint="Hi!" />
<x-datepicker label="Alt" wire:model="myDate2" icon="o-calendar" :config="$config1" />
<x-datepicker label="Range" wire:model="myDate3" icon="o-calendar" :config="$config2" inline />

Localization and global settings

First add extra locale packages, then set up a global flatpickr object. See more at flatpickr`s docs.

<head>
...
 
{{-- Flatpickr --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
 
{{-- It will not apply locale yet --}}
<script src="https://npmcdn.com/flatpickr/dist/l10n/fr.js"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/pt.js"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/ru.js"></script>
 
{{-- You need to set here the default locale or any global flatpickr settings--}}
<script>
flatpickr.localize(flatpickr.l10ns.fr);
</script>
</head>

Per component

Just add extra locale packages as described above, but don't apply global locale config. Instead, set locale on component config object.

Portuguese
French
@php
$config1 = ['locale' => 'pt'];
$config2 = ['locale' => 'fr'];
@endphp
 
<x-datepicker label="Portuguese" wire:model="myDate1" icon="o-calendar" :config="$config1" />
<x-datepicker label="French" wire:model="myDate1" icon="o-calendar" :config="$config2" />

Plugins

Here is a example for monthSelectPlugin. Please, refer to flatpickr`s docs for more plugins and how about to install them.

<head>
...
 
{{-- MonthSelectPlugin --}}
<script src="https://unpkg.com/flatpickr/dist/plugins/monthSelect/index.js"></script>
<link href="https://unpkg.com/flatpickr/dist/plugins/monthSelect/style.css" rel="stylesheet">
 
</head>
Month
@php
$config1 = [
'plugins' => [
[
'monthSelectPlugin' => [
'dateFormat' => 'm.y',
'altFormat' => 'F Y',
]
]
]
];
@endphp
 
<x-datepicker label="Month" wire:model="myDate5" icon="o-calendar" :config="$config1" />

maryUI
Sponsor