Issue with Internationalizing displayFormat in Editor's Datetime Field

vendredi3

Description of problem:

I can't manage to format a datetime field in the Editor form: the datepicker is in the correct language (fr), and I have set moment.locale to fr.
I also tested by logging moment.locale() during the initEdit and initCreate events, which confirms that the locale is indeed set to 'fr'.
However, the field still contains non-translated dates.
I want to format the date using displayFormat with "MMMM YYYY", but the month is displayed in English.

Could you point me in the right direction to resolve this issue?
I would appreciate any guidance on how to ensure the date is properly formatted and displayed in French as expected.

Regards

allan

Hi,

This example shows a date picker in French.

This is the CDN translation file and it contains a datetime property which has the relevant information for DateTime to display in French.

Using a displayFormat is how I would recommend doing it.

Allan

rf1234

I took a look at the moment locale file for French
https://cdn.jsdelivr.net/npm/moment-locale-fr@1.0.0/fr.js

You would need to select a format from this list:

longDateFormat : {
    LT : 'HH:mm',
    LTS : 'HH:mm:ss',
    L : 'DD/MM/YYYY',
    LL : 'D MMMM YYYY',
    LLL : 'D MMMM YYYY HH:mm',
    LLLL : 'dddd D MMMM YYYY HH:mm'
},

I personally prefer format "L" which in English (UK) is the same as in French.

I set moment.locale and a variable that I pass to Editor (but an older version; might work differently right now!!) I also use a sorting plugin that works very well.

if (lang === 'de') {
    moment.locale('de');
    momentLocale = 'de';
} else {
    moment.locale('en-gb');
    momentLocale = 'en-gb';
}

// https://datatables.net/blog/2014-12-18  Ultimate date/time sorting
    $.fn.dataTable.moment( 'L', momentLocale ); 

And this is how I specifiy a date field in Editor. Works like a charm in German or English:

}, {
    label: lang === 'de' ? 'Erster Tilgungstermin:' : 'Date of first Repayment:',
    name: "fixed.first_repayment_date",
    type: "datetime",
    format: 'L',
    opts: {
        showWeekNumber: true,
        yearRange: 40,
        momentLocale: momentLocale
    }
}, {

vendredi3

Thank you both for your responses, Allan for confirming that 'displayFormat' was indeed the correct option to format the date for display, and rf1234 for pointing me in the right direction with the use of 'opts' to pass options to the Editor form's datepicker.

Here is the final code that worked:

}, {
    label: 'Fin période',
    name: 'ts_end',
    type: 'datetime',
    def: () => new Date(),
    opts: {
        locale: "fr"
    },
    displayFormat: 'MMMM YYYY',
    wireFormat: 'YYYY-MM-DD'
}, {