Discussion :

[dubitoph]

Bonjour à tous,

Hier, je me suis mis à l'étude et à l'utilisation de moment.js afin de préparer mon futur site à une internationalisation.

Donc, dans un premier temps, j'affiche les date au format local en procédant en 2 temps : au niveau du datepicker, j'applique le format 'yyyy-mm-dd' et au niveau de l'input et ensuite, lors de la détection d'un changement au niveau de l'input, j'applique le format local.

Voici le code concerné pour ces deux opérations :

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
 
    $([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'
        });
 
    });

Code :

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

1
2
3
4
5
6
 
    $([document]).on('change', 'input.js-datepicker-period',function() {
 
        $(this).val(moment($(this).val(), 'YYYY-MM-DD').locale(navigator.language).format('L'));
 
    });

Mon problème est le suivant : en base de données, le champ accueillant la date est de type datetime. Donc, au moment de l'envoi du formulaire, je devrais pouvoir détecter la locale de l'utilisateur et transformer les dates au format 'YYYY:mm:dd 00:00:00', du genre :

Code :

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

1
2
3
4
5
6
7
8
9
10
    $("form").submit(function(event) {

        $('input.js-datepicker-period').each(function(e) {

            $(this).val(moment($(this).val(), 'locale_format').convertToDatetime());

        });

    });

Cependant, je ne sais pas comment effectuer ceci.

Quelqu'un aurait une idée?

Merci d'avance pour votre aide.

[dubitoph]

J'ai résolu mon problème de la façon suivante :

- au niveau de mon app.js (main.js) :

Code :

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

1
2
3
4
 
import moment from 'moment';
window['moment'] = moment;
moment.locale(navigator.language);

- au niveau du dateTimePicker:

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
 
    $([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'
        });
 
    });

- au niveau de la valeur des inputs :

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
24
25
26
27
28
29
30
31
32
33
34
 
...
moment.locale(navigator.language);
var localData = moment.localeData();
var localeDateFormat = localData['_longDateFormat']['L'];
...
    //Dates formatting according user's locale
    $('input.js-datepicker-period').each(function () {
 
        var sDate = $(this).val();
 
        $(this).val(moment(sDate, 'YYYY-MM-DD').format('L'));
 
    });
    //End date formatting
...
    $([document]).on('change', 'input.js-datepicker-period',function() {
 
        $(this).val(moment($(this).val(), 'YYYY-MM-DD').format('L'));
 
    });
 
    $("form").submit(function(event) {
 
        $('input.js-datepicker-period').each(function(e) {
 
            var sDate = $(this).val();
            var dateTime = moment(sDate, localeDateFormat).toISOString();
 
            $(this).val(dateTime);
 
        });
 
    });