Datepicker

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