Discussion :

[thor76160]

bonjour, j'aurais besoin d'une aide précieuse avec les dates en js. je sais qu'il existe beaucoup de tuto sur ce sujet, mais là j'ai un cas un peu spécial.

voici la méthode toLocalFormat() :

Code :

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

1
2
today = new Date();
            var date = today.toLocaleFormat( "%A %e %B %Y" );

elle affiche la date en chaine de caractère, en français en occurrence si vous êtes sur un pc français. c'est super car il n'y a aucun traitement à effectuer.
cependant, dans une appli que je suis entrain de réaliser, j'ai la possibilité de changer la langue de l'utilisateur (un tableau json contient des phrases en plusieurs langues, l'utilisateur saisi donc sa langue ...).

comment puis-je forcer cette méthiode toLocalFormat() à accepter telle ou telle langue ? que ce soit français, anglais, italien ...

merci

[SpaceFrog]

a part passer par des getDay getMonth et avoir un array par langue

[thor76160]

arf, c'est donc le seul moyen ? j'y avais pensé, c'est juste que le traitement est lourd, là c'était tout léger xD.

je vais laisser ce post actif quelques temps, avec de la chance quelqu'un aura une astuce miraculeuse, sinon va y avoir plus de lignes dans mon appli

[thor76160]

je suis venu, j'ai vu, j'ai vaincu !

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
regional: {
            'fr': {
                previousDay: 'Précédent',
                nextDay: 'Suivant',
                dateFormat: '%A %e %B %Y',
                date: {
                    monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Aoùt','Septembre','Octobre','Novembre','Décembre'],
                    dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
                    dateFormat: 'j n m y'
                },
                details: {
                    'sunr':'Lever du soleil',
                    'suns':'Coucher du soleil',
                    'wind':'Vent',
                    'direction':'direction',
                    'speed':'vitesse',
                    'hmid':'Humidité',
                    'ppcp':'Précipitation'
                },
                unit: {
                    '':'metric',
                    '':'km'
                },
                cardinalDirection: {
                    'N':'Nord',
                    'NE':'Nord-Est',
                    'E':'Est',
                    'SE':'Sud-Est',
                    'S':'Sud',
                    'SW':'Sud-ouest',
                    'W':'Ouest',
                    'NW':'Nord-ouest'
                },
                error: {
                    'userAccountNull':'Identifiant et clé de connexion inconnus',
                    'networkConnection':'Connexion internet impossible',
                    'userAccount':'Identifiant et clé de connexion incorrects'
                }
            }
        }
 
_getTimeStringByLanguage: function()
        {
            var obj = this,
                el = obj.element,
                opt = obj.options;
 
            var today = new Date();
            var date_string = '';
            var date_json = obj.regional['fr'].date;
            var dateFormat = (date_json.dateFormat).split(' ');
 
            $.each(dateFormat, function(i, type)
            {
                switch (type)
                {
                    case 'j':
                        date_string = date_string + ' ' + date_json.dayNames[today.getDay()];
                    break;
 
                    case ',':
                        date_string = date_string + ',';
                    break;
 
                    case 'm':
                        date_string = date_string + ' ' + date_json.monthNames[today.getMonth()];
                    break;
 
                    case 'n':
                        date_string = date_string + ' ' + today.getDate();
                    break;
 
                    case 'y':
                        date_string = date_string + ' ' + today.getFullYear();
                    break;
                }
            });
 
            alert(date_string);
        }

je ne mets pas encore ce post en résolu, j'attends de meilleurs propositions, plus légère et si possible, en fonction native

[Bovino]

et si possible, en fonction native

Ne rêve pas

La notion "locale" en JavaScript dépend de la langue spécifiée par l'OS, qui n'est donc pas adaptable par script.

[thor76160]

c'est dommage car cette fonction était courte et bien pratique, elle devrait être améliorée pour ce cas de figure !
bon dans ce cas je mets mon post en résolu, merci !

[sekaijin]

pire locale n'a pas beaucoup de sens sur le web

il y d'abord la langue de l'OS
je ne connais pas de navigateur qui te permette de la connaître en javascript

ensuite il y a les langues préférées du navigateurs
il suffit d'aller dans les préférences du navigateur
j'ai bien dit LES langues car il y en a plusieurs

en javascript tu peux les connaîtrais mais rien ne te garantie que la langue utilisée fait partie de cette liste.

car le serveur aussi à ses langues préférées.

le protocole prévoit le fonctionnement suivant.
le client envoi une demande avec sa liste de langues préféré ordonnée.
le serveur réceptionne cette demande et recherche les langues disponibles en parcourant la liste.
la première langue préférée par le client qui est trouvée est envoyée.
si aucune langue préférée n'est trouvées le serveur parcours alors sa propre liste de langue préférée. de même c'est la première disponible qui est utilisée.
si aucun langue préférée par le serveur n'est trouvée c'est la première langue disponible qui est utilisée.

donc si le client préfère fr, en-uk, en-us, de
et que le serveur préfère en-us, en, fr-ca, fr
et que les seule langues disponible sont es, it, ru
se sera es qui sera utilisé
or en javascript tu n'aura accès qu'à la liste fr, en-uk, en-us, de

mais ce n'est pas tout car très souvent avec php asp et autre serveur dynamique on ajoute une couche qui permet à l'utilisateur de choisir sa langue sans la changer dans le navigateur dans ce cas là elle est au mieux dans un cookie et js pourra lire ce cookie pour la connaître, au pire dans la session côté serveur et il n'y a aucun moyen de la connaître.

tu as là suffisamment d'élément pour comprendre pourquoi il n'y a pas de toLocaleString en js sur le web.

je mets ici le fichier locale de ExtJS en français comme on peut le voir cela représente du travail mais ce n'est pas exorbitant

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
/*!
 * Ext JS Library 3.3.0
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/*
 * France (France) translation
 * By Thylia
 * 09-11-2007, 02:22 PM
 * updated by disizben (22 Sep 2008)
 * updated by Thylia (20 Apr 2010)
 */
 
Ext.UpdateManager.defaults.indicatorText = '<div class="loading-indicator">En cours de chargement...</div>';
 
if(Ext.DataView){
   Ext.DataView.prototype.emptyText = "";
}
 
if(Ext.grid.GridPanel){
   Ext.grid.GridPanel.prototype.ddText = "{0} ligne{1} sélectionnée{1}";
}
 
if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "En cours de chargement...";
}
 
Date.shortMonthNames = [
   "Janv",
   "Févr",
   "Mars",
   "Avr",
   "Mai",
   "Juin",
   "Juil",
   "Août",
   "Sept",
   "Oct",
   "Nov",
   "Déc"
];
 
Date.getShortMonthName = function(month) {
  return Date.shortMonthNames[month];
};
 
Date.monthNames = [
   "Janvier",
   "Février",
   "Mars",
   "Avril",
   "Mai",
   "Juin",
   "Juillet",
   "Août",
   "Septembre",
   "Octobre",
   "Novembre",
   "Décembre"
];
 
Date.monthNumbers = {
  "Janvier" : 0,
  "Février" : 1,
  "Mars" : 2,
  "Avril" : 3,
  "Mai" : 4,
  "Juin" : 5,
  "Juillet" : 6,
  "Août" : 7,
  "Septembre" : 8,
  "Octobre" : 9,
  "Novembre" : 10,
  "Décembre" : 11
};
 
Date.getMonthNumber = function(name) {
  return Date.monthNumbers[Ext.util.Format.capitalize(name)];
};
 
Date.dayNames = [
   "Dimanche",
   "Lundi",
   "Mardi",
   "Mercredi",
   "Jeudi",
   "Vendredi",
   "Samedi"
];
 
Date.getShortDayName = function(day) {
  return Date.dayNames[day].substring(0, 3);
};
 
Date.parseCodes.S.s = "(?:er)";
 
Ext.override(Date, {
    getSuffix : function() {
        return (this.getDate() == 1) ? "er" : "";
    }
});
 
if(Ext.MessageBox){
    Ext.MessageBox.buttonText = {
        ok     : "OK",
        cancel : "Annuler",
        yes    : "Oui",
        no     : "Non"
    };
}
 
if(Ext.util.Format){
    Ext.util.Format.date = function(v, format){
        if(!v) return "";
        if(!Ext.isDate(v)) v = new Date(Date.parse(v));
        return v.dateFormat(format || "d/m/Y");
    };
}
 
if(Ext.DatePicker){
    Ext.apply(Ext.DatePicker.prototype, {
        todayText         : "Aujourd'hui",
        minText           : "Cette date est antérieure à la date minimum",
        maxText           : "Cette date est postérieure à la date maximum",
        disabledDaysText  : "",
        disabledDatesText : "",
        monthNames        : Date.monthNames,
        dayNames          : Date.dayNames,
        nextText          : 'Mois suivant (CTRL+Flèche droite)',
        prevText          : "Mois précédent (CTRL+Flèche gauche)",
        monthYearText     : "Choisissez un mois (CTRL+Flèche haut ou bas pour changer d'année.)",
        todayTip          : "{0} (Barre d'espace)",
        okText            : " OK ",
        cancelText        : "Annuler",
        format            : "d/m/y",
        startDay          : 1
    });
}
 
if(Ext.PagingToolbar){
    Ext.apply(Ext.PagingToolbar.prototype, {
        beforePageText : "Page",
        afterPageText  : "sur {0}",
        firstText      : "Première page",
        prevText       : "Page précédente",
        nextText       : "Page suivante",
        lastText       : "Dernière page",
        refreshText    : "Actualiser la page",
        displayMsg     : "Page courante {0} - {1} sur {2}",
        emptyMsg       : 'Aucune donnée à afficher'
    });
}
 
if(Ext.form.BasicForm){
    Ext.form.BasicForm.prototype.waitTitle = "Veuillez patienter...";
}
 
if(Ext.form.Field){
   Ext.form.Field.prototype.invalidText = "La valeur de ce champ est invalide";
}
 
if(Ext.form.TextField){
    Ext.apply(Ext.form.TextField.prototype, {
        minLengthText : "La longueur minimum de ce champ est de {0} caractère(s)",
        maxLengthText : "La longueur maximum de ce champ est de {0} caractère(s)",
        blankText     : "Ce champ est obligatoire",
        regexText     : "",
        emptyText     : null
    });
}
 
if(Ext.form.NumberField){
   Ext.apply(Ext.form.NumberField.prototype, {
      decimalSeparator : ",",
      decimalPrecision : 2,
      minText : "La valeur minimum de ce champ doit être de {0}",
      maxText : "La valeur maximum de ce champ doit être de {0}",
      nanText : "{0} n'est pas un nombre valide"
   });
}
 
if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "Désactivé",
      disabledDatesText : "Désactivé",
      minText           : "La date de ce champ ne peut être antérieure au {0}",
      maxText           : "La date de ce champ ne peut être postérieure au {0}",
      invalidText       : "{0} n'est pas une date valide - elle doit être au format suivant: {1}",
      format            : "d/m/y",
      altFormats        : "d/m/Y|d-m-y|d-m-Y|d/m|d-m|dm|dmy|dmY|d|Y-m-d"
   });
}
 
if(Ext.form.ComboBox){
   Ext.apply(Ext.form.ComboBox.prototype, {
      loadingText       : "En cours de chargement...",
      valueNotFoundText : undefined
   });
}
 
if(Ext.form.VTypes){
   Ext.apply(Ext.form.VTypes, {
      emailText    : 'Ce champ doit contenir une adresse email au format: "usager@example.com"',
      urlText      : 'Ce champ doit contenir une URL au format suivant: "http:/'+'/www.example.com"',
      alphaText    : 'Ce champ ne peut contenir que des lettres et le caractère souligné (_)',
      alphanumText : 'Ce champ ne peut contenir que des caractères alphanumériques ainsi que le caractère souligné (_)'
   });
}
 
if(Ext.form.HtmlEditor){
   Ext.apply(Ext.form.HtmlEditor.prototype, {
      createLinkText : "Veuillez entrer l'URL pour ce lien:",
          buttonTips : {
              bold : {
                  title: 'Gras (Ctrl+B)',
                  text: 'Met le texte sélectionné en gras.',
                  cls: 'x-html-editor-tip'
              },
              italic : {
                  title: 'Italique (Ctrl+I)',
                  text: 'Met le texte sélectionné en italique.',
                  cls: 'x-html-editor-tip'
              },
              underline : {
                  title: 'Souligné (Ctrl+U)',
                  text: 'Souligne le texte sélectionné.',
                  cls: 'x-html-editor-tip'
              },
              increasefontsize : {
                  title: 'Agrandir la police',
                  text: 'Augmente la taille de la police.',
                  cls: 'x-html-editor-tip'
              },
              decreasefontsize : {
                  title: 'Réduire la police',
                  text: 'Réduit la taille de la police.',
                  cls: 'x-html-editor-tip'
              },
              backcolor : {
                  title: 'Couleur de surbrillance',
                  text: 'Modifie la couleur de fond du texte sélectionné.',
                  cls: 'x-html-editor-tip'
              },
              forecolor : {
                  title: 'Couleur de police',
                  text: 'Modifie la couleur du texte sélectionné.',
                  cls: 'x-html-editor-tip'
              },
              justifyleft : {
                  title: 'Aligner à gauche',
                  text: 'Aligne le texte à gauche.',
                  cls: 'x-html-editor-tip'
              },
              justifycenter : {
                  title: 'Centrer',
                  text: 'Centre le texte.',
                  cls: 'x-html-editor-tip'
              },
              justifyright : {
                  title: 'Aligner à droite',
                  text: 'Aligner le texte à droite.',
                  cls: 'x-html-editor-tip'
              },
              insertunorderedlist : {
                  title: 'Liste à puce',
                  text: 'Démarre une liste à puce.',
                  cls: 'x-html-editor-tip'
              },
              insertorderedlist : {
                  title: 'Liste numérotée',
                  text: 'Démarre une liste numérotée.',
                  cls: 'x-html-editor-tip'
              },
              createlink : {
                  title: 'Lien hypertexte',
                  text: 'Transforme en lien hypertexte.',
                  cls: 'x-html-editor-tip'
              },
              sourceedit : {
                  title: 'Code source',
                  text: 'Basculer en mode édition du code source.',
                  cls: 'x-html-editor-tip'
              }
        }
   });
}
 
if(Ext.grid.GridView){
   Ext.apply(Ext.grid.GridView.prototype, {
      sortAscText  : "Tri croissant",
      sortDescText : "Tri décroissant",
      columnsText  : "Colonnes"
   });
}
 
if(Ext.grid.GroupingView){
   Ext.apply(Ext.grid.GroupingView.prototype, {
      emptyGroupText : '(Aucun)',
      groupByText    : 'Grouper par ce champ',
      showGroupsText : 'Afficher par groupes'
   });
}
 
if(Ext.grid.PropertyColumnModel){
    Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
        nameText   : "Propriété",
        valueText  : "Valeur",
        dateFormat : "d/m/Y",
        trueText   : "vrai",
        falseText  : "faux"
    });
}
 
if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "Cliquer et glisser pour redimensionner le panneau.",
      collapsibleSplitTip : "Cliquer et glisser pour redimensionner le panneau. Double-cliquer pour le cacher."
   });
}
 
if(Ext.form.TimeField){
   Ext.apply(Ext.form.TimeField.prototype, {
      minText     : "L'heure de ce champ ne peut être antérieure à {0}",
      maxText     : "L'heure de ce champ ne peut être postérieure à {0}",
      invalidText : "{0} n'est pas une heure valide",
      format      : "H:i",
      altFormats  : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|h a|g a|g A|gi|hi|Hi|gia|hia|g|H"
   });
}
 
if(Ext.form.CheckboxGroup){
  Ext.apply(Ext.form.CheckboxGroup.prototype, {
    blankText : "Vous devez sélectionner au moins un élément dans ce groupe"
  });
}
 
if(Ext.form.RadioGroup){
  Ext.apply(Ext.form.RadioGroup.prototype, {
    blankText : "Vous devez sélectionner au moins un élément dans ce groupe"
  });
}

le principe est simple dans le source on défini des classes et des objets dans le fichier locale on y mets toutes les localisation d'une langues pour toutes les classes et objet
les localisation vont juste surcharger les classes de base. par exemple
Ext.LoadMask est un objet qui permet de masquer l'interface et afficher un message demandant de patienter. cet objet n'existe peut être pas (on ne l'a pas chargé)
le fichier locale change donc son texte que s'il existe.

Code :

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

1
2
3
if(Ext.LoadMask){
    Ext.LoadMask.prototype.msg = "En cours de chargement...";
}

j'utilise cette façon de faire pour tous mes objets par exemple dans la partie admin j'ai un grid qui contient la liste des utilisateur avec leurs droit et un formulaire pour en éditer une

Code :

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

1
2
3
4
5
6
7
8
9
10
11
if(App.Admin.UserGrid){
    App.Admin.UserGrid.prototype.name = "Nom :";
    App.Admin.UserGrid.prototype.firstname = "Prénom :";
    ...
}
if(App.Admin.UserForm){
    App.Admin.UserForm.prototype.login = "Pseudo :";
    App.Admin.UserForm.prototype.name = "Nom :";
    App.Admin.UserForm.prototype.firstname = "Prénom :";
    ...
}

pour en revenir à la langue le seul qui connaît à coup sur la langue utilisée est le serveur au moment de générer la page.
sur le serveur donc je mets systématiquement dans la page la langue utilisée.
soit dans un cookie
soit dans un objet DOM
soit dans une variable js

si c'est dans le DOM ou dans un cookie j'ai en début de page un js qui lit et fixe une variable

c'est aussi le serveur qui charge le() fichier() locale
si mon objet à une méthode toString le fichier locale l'aura surchargé et un simple appel permettra d'obtenir la bonne chaîne.
sur l'exemple du Ext.LoadMask si j'ai une méthode getMsg
Ext.LoadMask.getMsg() me donnera le message dans la langue chargée.


A+JYT