Flatpickr locale

[psjavi]

Hi, I need to set the locale to "ES" for the Flatpickr range filter.

How can I do it? I've tried to don't inyect the package's assets and install it via npm but I don't know how to I have to init the flatpicker declared into de package.

Thanks in advance.

[lrljoe]

I will add this in when I add in the defaultDate for the range filter, hopefully in the next week.

[lrljoe]

Merged into development, if you'd like to test

[psjavi]

Hi, thanks a lot.

I've been reading the docs but I'm not able to find out how I have to change the locale.

I've got my .env config with APP_LOCALE=es
The date range x-data created in the html is the following:

x-data="flatpickrFilter($wire, 'fecha_de_solicitud', JSON.parse('{"allowInput":true,"altFormat":"F j, Y","ariaDateFormat":"F j, Y","dateFormat":"d/m/Y","earliestDate":null,"latestDate":null}'), $refs.dateRangeInput, 'es')">

My php is the following:

            DateRangeFilter::make('Fecha de solicitud')
                ->config([
                    'dateFormat' => 'd/m/Y'
                ])
                ->setFilterPillValues([0 => 'minDate', 1 => 'maxDate']) // The values that will be displayed for the Min/Max Date Values
                ->filter(function (Builder $builder, array $dateRange) { // Expects an array.
                    $builder
                        ->whereDate('requests.created_at', '>=', $dateRange['minDate']) // minDate is the start date selected
                        ->whereDate('requests.created_at', '<=', $dateRange['maxDate']); // maxDate is the end date selected
                }),

I've also tried to put in the php this configuration:

            DateRangeFilter::make('Fecha de solicitud')
                ->config([
                    'dateFormat' => 'd/m/Y',
'locale' => 'es'
                ])

What I'm doing wrong?

Thanks a lot in advance.

[lrljoe]

So, if you want the Spanish locale, then you need to ensure that the locale is loaded.

The docs aren't updated yet, but the relevant content is:

Localisation (BETA)

The default installation includes only the English (en) locale.

Bundling

Should you wish to localise, you must include the Flatpickr locale files in your build pipeline. This applies to only the specific locales that you require in your app.js (requires adding the flatpickr library to your package.json by executing "npm i flatpickr --save")

import { Spanish } from "../imports/flatpickr/l10n/es.js";

CDN

You can also add locales using the Flatpickr CDN, ensuring that these are loaded before the page renders.

For example to add Spanish (es), ensure that the following is in the "head" section of your layout, ideally before your app.js

<script src="https://npmcdn.com/flatpickr/dist/l10n/es.js" async></script>

[lrljoe]

Docs should be updated in next day or two to reflect the above.

[psjavi]

Good morning Joe,

Sorry for disturbing you. I've done some test but the calendar is still in english.

I've installed flatpicker as package:

I've added the locale in my app.js. I've also done the following attempt:

The app.js is correctly compiled with the locale:

I've exported the date-range view in order to modify the html but I also have tried to restore it and use the view comming form vendor. This is my custom html:

@php
    $filterKey = $filter->getKey();
@endphp

<div x-cloak id="{{ $tableName }}-dateRangeFilter-{{ $filterKey }}"
     x-data="flatpickrFilter($wire, '{{ $filterKey }}', @js($filter->getConfigs()), $refs.dateRangeInput, '{{ App::currentLocale() }}')">

    <div class="relative z-0">
        <input
            type="text"
            x-ref="dateRangeInput"
            x-on:click="init"
            value="{{ $filter->getDateString(isset($this->appliedFilters[$filterKey]) ? $this->appliedFilters[$filterKey] : '') }}"
            wire:key="{{ $filter->generateWireKey($tableName, 'dateRange') }}"
            id="{{ $tableName }}-filter-dateRange-{{ $filterKey }}"
            class="pt-3 pb-2 block w-full px-0 mt-0 bg-transparent border-0 border-b-2 appearance-none focus:outline-none focus:ring-0 focus:border-black border-gray-200"
            placeholder=" "
        />
        <x-livewire-tables::tools.filter-label :$filter :$tableName />
    </div>
</div>

What I'm doing wrong?

Many thanks for your help and time.

[ADRYEP]

Hi! I'm having the same error. @psjavi did you solve it?

[lrljoe]

@ADRYEP how are you adding the localisations for Flatpickr? Are they bundled in, or are you using a CDN to add them to your layout?

[ADRYEP]

None of both, I directly use it in the Table Component and the blade:

blade:
@php
$filterKey = $filter->getKey();
@endphp

<div class="relative z-0">
    <input
        type="text"
        x-ref="dateRangeInput"
        x-on:click="init"
        value="{{ $filter->getDateString(isset($this->appliedFilters[$filterKey]) ? $this->appliedFilters[$filterKey] : '') }}"
        wire:key="{{ $filter->generateWireKey($tableName, 'dateRange') }}"
        id="{{ $tableName }}-filter-dateRange-{{ $filterKey }}"
        class="pt-3 pb-2 block w-full px-0 mt-0 bg-transparent border-0 border-b-2 appearance-none focus:outline-none focus:ring-0 focus:border-black border-gray-200"
        placeholder=" "
    />
    <x-livewire-tables::tools.filter-label :$filter :$tableName />
</div>

Livewire component:
DateRangeFilter::make('Fecha de solicitud')
->config([
'dateFormat' => 'd/m/Y'
])
->setFilterPillValues([0 => 'minDate', 1 => 'maxDate']) // The values that will be displayed for the Min/Max Date Values
->filter(function (Builder $builder, array $dateRange) { // Expects an array.
$builder
->whereDate('requests.created_at', '>=', $dateRange['minDate']) // minDate is the start date selected
->whereDate('requests.created_at', '<=', $dateRange['maxDate']); // maxDate is the end date selected
})

[lrljoe]

None of both, I directly use it in the Table Component and the blade:

blade:
@php
$filterKey = $filter->getKey();
@endphp

<div class="relative z-0">
    <input
        type="text"
        x-ref="dateRangeInput"
        x-on:click="init"
        value="{{ $filter->getDateString(isset($this->appliedFilters[$filterKey]) ? $this->appliedFilters[$filterKey] : '') }}"
        wire:key="{{ $filter->generateWireKey($tableName, 'dateRange') }}"
        id="{{ $tableName }}-filter-dateRange-{{ $filterKey }}"
        class="pt-3 pb-2 block w-full px-0 mt-0 bg-transparent border-0 border-b-2 appearance-none focus:outline-none focus:ring-0 focus:border-black border-gray-200"
        placeholder=" "
    />
    <x-livewire-tables::tools.filter-label :$filter :$tableName />
</div>

Livewire component:
DateRangeFilter::make('Fecha de solicitud')
->config([
'dateFormat' => 'd/m/Y'
])
->setFilterPillValues([0 => 'minDate', 1 => 'maxDate']) // The values that will be displayed for the Min/Max Date Values
->filter(function (Builder $builder, array $dateRange) { // Expects an array.
$builder
->whereDate('requests.created_at', '>=', $dateRange['minDate']) // minDate is the start date selected
->whereDate('requests.created_at', '<=', $dateRange['maxDate']); // maxDate is the end date selected
})

Looks like you're missing the locale key

How are you adding the Flatpickr es translation, you need to either bundle it, or use a cdn to add the translation file for flatpickr, which one are you using.

[ADRYEP]

Could you show me an example bundling it? I tried using the translation file via CDN but it didn't work and I tried specifying the translation in the Laravel proper file but it didn't work either

[lrljoe]

@ADRYEP - please read the docs for the DateRangeFilter, it should be clear from those!

IF you still have a problem - please share your

1. app.js
2. The "head" section of the relevant layout
3. The filters() section of your table.

[lrljoe]

If anyone is still struggling with this, please do let me know, reach out on the Discord (ideally) as the best way to reach me, and I'll try to think of a way to document this more clearly.