Discussion :

[dubitoph]

Bonjour la communauté,

Je travaille actuellement sur un site que je compte un jour internationaliser. Afin de préparer les bases de manière correcte, je suis en réflexion sur les formats de date. J'ai beau fouiller sur le net, j'ai du mal à trouver une explication claire sur la manière de travailler avec les dates en fonction des locales de l'utilisateur.

J'utilise Datepicker et différents scripts de traitement de dates (ajout de jours à une date, affectation d'une valeur date à un input via Datepicker et via script,...).

Quelqu'un pourrait me donner une explication sur la voie à suivre ?

Merci d'avance!

[danielhagnoul]

Je ne travaille plus les dates qu'au format ISO long depuis 2011 (https://www.developpez.net/forums/d1...e/#post5965922 : je vous donne ce lien à titre de référence historique uniquement).

Depuis plusieurs années je travaille les dates exclusivement avec moment.js (https://momentjs.com/) et plus rarement avec moment timezone (https://momentjs.com/timezone/)

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/fr.js"></script>
    <script defer src="https://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.8.5.js"></script>

dvjhUtilities-1.8.5.js est un fichier perso voir mon blog : https://www.developpez.net/forums/bl...ties-1-8-5-js/

Ce fichier contient plusieurs fonctions utiles, dont la class kDvjhDate qui extends l'objet Date, la méthode toString montre comment j'obtiens le format ISO long à partir de moment.js (le format ISO de Date est moins complet) :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
kDvjhDate = class extends Date {
        constructor(p) {
            if (p) {
                super(p);
            } else {
                super();
            }
 
            this.auteur = 'Daniel Hagnoul';
        }
        toString() {
            // format ISO long, dépend de moment.js
            return moment(this).format("YYYY-MM-DDTHH:mm:ss.SSSZZ");
        }
        toInput() {
            return this.toString().split("T")[0];
        }
    },

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
window.document.addEventListener('DOMContentLoaded', ev => {
    // le DOM est construit, la page web n'est pas visible
    moment.locale('fr'); // initialisation de moment.js en FR
    console.log(`DOM ready : ${new kDvjhDate()}`); // utilisation de kDvjhDate
 
    // début code du test
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});
 
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
    console.log(`Window load : ${new kDvjhDate()}`); // utilisation de kDvjhDate
 
 
    // début code du test
 
    // fin code du test
 
    kIDUnique();
}, {
    capture: false,
    passive: true,
    once: false
});

[javatwister]

Bonjour,

Début de piste: penche-toi sur le constructeur Intl.DateTimeFormat;

[dubitoph]

Merci à vous deux pour ces pistes de réflexion. Je vais m'atteler à cela aujourd'hui.

Donc, si je comprends bien, je devrais travailler avec moment.js puis formater les dates en fonction des locales de l'utilisateur avec Intl.DateTimeFormat...

[dubitoph]

Bon, je me suis attardé sur moment.js. Voici donc la manière dont je l'utilise avec datePicker et dans un script afin d'afficher un format de date correspondant à la locale du navigateur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
//Use a calendar for the start and end dates of periods
 
    $([document]).on('focus', 'input.js-datepicker-period',function() {
 
        $(".js-datepicker-period").datepicker({
            viewMode: "months",
            weekStart: 1,
            daysOfWeekHighlighted: "6,0",
            autoclose: true,
            todayHighlight: true,
            startDate: '-0m',
            endDate:'+2y',
            format: 'yyyy-mm-dd'
        });
 
    });
 
    $([document]).on('change', 'input.js-datepicker-period',function() {
 
        $(this).val(moment($(this).val(), 'YYYY-MM-DD').locale(navigator.language).format('L'));
 
    });

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
...
    if (index == 1) 
    {
 
        var today = moment(new Date()).locale(navigator.language).format('L');
 
        $('#periods_advert_periods_1_start').val(today);
 
    }
    else
    {
        var idPreviousDate = 'periods_advert_periods_'.concat(index - 1).concat('_end');
        var previousDate = $('#'.concat(idPreviousDate)).val();
 
        startDate = moment(previousDate, "DD/MM/YYYY").add(1, 'days');
        $('#periods_advert_periods_'.concat(index).concat('_start')).val(startDate.locale(navigator.language).format('L'));
 
    }
...