Is it possible to change the language of the date picker ? (LTR like French)

[joffreypersia]

Hi,

I would like to make the date picker support multiple languages, such as French and English.

On <flux:date-picker mode="range" with-presets />, is it possible to change the preset strings and also modify the date format in the input button, as well as its locale?

Thank you for your help.

[jeffchown]

@joffreypersia Have a look at this issue #1188

[joffreypersia]

Hi @jeffchown ,
Thank you for your help. I didn't understand what might be a solution for me, it is partially solved.

The timerange strings are translated

// fr.json in /lang
{
    "Today": "Aujourd'hui",
    "Yesterday": "Hier",
    "This Week": "Cette semaine",
    "Last Week": "La semaine dernière",
    "Last 7 Days": "Les 7 derniers jours",
    "This Month": "Ce mois-ci",
    "Last Month": "Le mois dernier",
    "This Quarter": "Ce trimestre",
    "Last Quarter": "Le trimestre dernier",
    "This Year": "Cette année",
    "Last Year": "L'année dernière",
    "Last 14 Days": "Les 14 derniers jours",
    "Last 30 Days": "Les 30 derniers jours",
    "Last 3 Months": "Les 3 derniers mois",
    "Last 6 Months": "Les 6 derniers mois",
    "Year to Date": "Année à ce jour",
    "All Time": "Tout le temps",
    "Custom": "Personnalisé"
}

but not the months, week days, the label in the input is a Carbon format in english, and the week starts a sunday and not monday.

I would like to fully integrate this component for a french/english app.

[jeffchown]

And you can find the translate strings here:

flux/src/DateRangePreset.php

Lines 51 to 72 in dec010f

	public function label()
	{
	return match ($this) {
	static::Today => __('Today'),
	static::Yesterday => __('Yesterday'),
	static::ThisWeek => __('This Week'),
	static::LastWeek => __('Last Week'),
	static::Last7Days => __('Last 7 Days'),
	static::ThisMonth => __('This Month'),
	static::LastMonth => __('Last Month'),
	static::ThisQuarter => __('This Quarter'),
	static::LastQuarter => __('Last Quarter'),
	static::ThisYear => __('This Year'),
	static::LastYear => __('Last Year'),
	static::Last14Days => __('Last 14 Days'),
	static::Last30Days => __('Last 30 Days'),
	static::Last3Months => __('Last 3 Months'),
	static::Last6Months => __('Last 6 Months'),
	static::YearToDate => __('Year to Date'),
	static::AllTime => __('All Time'),
	static::Custom => __('Custom'),
	};

[jeffchown]

@joffreypersia As I understand it, the flux:date-picker uses the user's browser's locale settings for the date labels.
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat

So, if your user has their browser set to French, then those labels should be properly rendered in French.

[joffreypersia]

Thank you

Indeed, I tried in a french browser it translated the months and the day week, but not the "cancel" or "select range" button, and the week starts on sunday.

I think @joshhanley and @calebporzio should consider a way to set the language in the props of the component, of at least listen to the Carbon default language..? Because the app supports multiple languages, the language preference is stored in the database of the user. The user can then set its prefered language and not only use the one in the OS / Browser.

On https://fluxui.dev/components/date-picker#fluxdate-picker, I don't see anything for format in date range.

[jeffchown]

You're welcome, @joffreypersia - getting closer...

You make some good suggestions/points. We'll see what they have to say.

[joffreypersia]

I found that <flux:date-picker mode="range" with-presets start-day="1"> works to have monday as the first day of the week.

[joshhanley]

@joffreypersia thanks for the request! This isn't a feature request as it's a question. If you are unsure about something please open an issue in future.

The date-picker does use the browser's locale for date formatting. You can also enforce a specific locale for the calendar/ date-picker by passing locale="fr" as an attribute, as documented here https://fluxui.dev/components/calendar#localization

But text still needs to be translated by the backend, like the date range preset labels as linked by @jeffchown.

There are also translation strings available for the canel and select range/ select date buttons. Again you need to do that on the backend as browsers don't have translation built in.

<ui-close>
    <flux:button variant="ghost">{{ __('Cancel') }}</flux:button>
</ui-close>

<ui-date-picker-select>
    <flux:button variant="primary">
        <?php if ($range): ?>
            {{ __('Select range') }}
        <?php else: ?>
            {{ __('Select date') }}
        <?php endif; ?>
    </flux:button>
</ui-date-picker-select>

As I believe everything you are after is already possible, I'm going to close this. Feel free to comment back here if you are still having issues or open an issue if something doesn't work.

[joffreypersia]

Hi @jeffchown, as you can see in my previous post, the `{{ __('Cancel') }} is well translated outside the component.

Here is the lang/fr.json
fr.json

[jeffchown]

@joffreypersia Strange...

This is the code in flux/date-picker/index.blade.php that is responsible for displaying that Cancel button:

<ui-close>
    <flux:button variant="ghost">{{ __('Cancel') }}</flux:button>
</ui-close>

[joshhanley]

@joffreypersia hmm very strange. When I copied your fr.json file into my app, the cancel translation worked fine. I had to add an extra on for Select a date which is the default placeholder, but yeah it all worked as I'd expect.

<flux:date-picker with-confirmation locale="fr" />

[joffreypersia]

I understood..! I didn't updated Flux to 2.0.6 with this issue fixed I was in 2.0.5. "Fix date picker cancel button so it's translatable by @joshhanley"

And for the string shown in english in the calendar input, I think it is due to a conflict between the browser language and the component language. I don't mind leaving this it for now.

For this placeholder not translated, I don't know what I should do..? This is the only detail that might be fixed somehow.

[joshhanley]

@joffreypersia ah haha, lucky someone fixed it! Had forgotten I’d done that 😅

Can you open an issue for that select placeholder so we can investigate it? It’s probably just a missing translation. Thanks!