Format de dates

Version imprimable

11/08/2019, 11h38
dubitoph

Format de dates

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!

:salut:

Je ne travaille plus les dates qu'au format ISO long depuis 2011 (https://www.developpez.net/forums/d1...e/ : 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:

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:

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:

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
});

11/08/2019, 12h10
javatwister

Bonjour,

Début de piste: penche-toi sur le constructeur Intl.DateTimeFormat;
12/08/2019, 11h49
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...

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:

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:

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'));
 
    }
...