Un modo definitivo di formattare le date per i siti internazionali
I formati delle date variano a seconda della regione e della lingua, quindi è sempre utile trovare un modo per visualizzare le date per gli utenti, specifiche per la loro lingua e regione.
Già nel dicembre 2012, ECMA ha rilasciato le specifiche dell'API di internazionalizzazione per JavaScript. L'API di internazionalizzazione ci aiuta a visualizzare determinati dati in base alla lingua e alle specifiche cuturali. Può essere usato per identificare valute, fusi orari e altro ancora.
In questo post esamineremo formattazione della data usando questa API.
Conoscere le impostazioni locali dell'utente
Per mostrare la data secondo le impostazioni locali preferite dell'utente, per prima cosa dobbiamo sapere qual è il locale preferito. Attualmente il modo infallibile per sapere che è quello di chiedere all'utente; Consenti agli utenti di selezionare la lingua e le impostazioni della regione preferite nella pagina web.
Ma se questa non è un'opzione, puoi interpretare il Accept-Language richiesta intestazione o leggere il navigator.language(per Chrome e Firefox) o navigator.browserLanguage(per IE) valori.
Si prega di sapere che non tutte queste opzioni restituiscono la lingua preferita dell'interfaccia utente del browser.
var language_tag = window.navigator.browserLanguage || window.navigator.language || "En"; // restituisce tag della lingua come 'en-GB'
Controlla l'API di internazionalizzazione
Per sapere se il browser supporta o meno l'API di internazionalizzazione, possiamo verificare la presenza dell'oggetto globale Intl.
if (window.hasOwnPropertyâ €‹("Intl") && typeof Intl === "oggetto") // L'API di internazionalizzazione è presente, usiamola Il Intl oggetto
Intl è un oggetto globale per l'utilizzo dell'API di internazionalizzazione. Ha tre proprietà che sono costruttori per tre oggetti cioè Collator, NumberFormat, e DateTimeFormat.
L'oggetto che useremo è DateTimeFormat che ci aiuterà a formattare la data in base alle diverse lingue.
Il DateTimeFormat oggetto
Il DateTimeFormat costruttore prende due argomenti opzionali;
locali- una stringa o una serie di stringhe che rappresentano i tag della lingua, ad esempio; “de” per la lingua tedesca, “it-IT” per l'inglese usato nel Regno Unito. Se non viene menzionato un tag della lingua, la locale predefinita sarà quella del runtime.opzioni- un oggetto le cui proprietà sono utilizzate per personalizzare il formattatore. Ha le seguenti proprietà:
| Proprietà | Descrizione | Valori possibili |
| giorno | Giorno del mese | “2 cifre”, “numerico” |
| era | Era la data in cui cade, Es: BC | “stretto”, “corto”, “lungo” |
| formatMatcher | L'algoritmo utilizzato per la corrispondenza del formato | “di base”, “il più adatto”[Predefinito] |
| ora | Rappresenta le ore nel tempo | “2 cifre”, “numerico” |
| hour12 | Indica il formato di 12 ore (vero) o formato di 24 ore (falso) | vero, falso |
| localeMatcher | L'algoritmo utilizzato per la corrispondenza delle impostazioni internazionali | “consultare”, “il più adatto”[Predefinito] |
| minuto | Minuti nel tempo | “2 cifre”, “numerico” |
| mese | Mese in un anno | “2 cifre”, “numerico”, “stretto”, “corto”, “lungo” |
| secondo | Secondi nel tempo | “2 cifre”, “numerico” |
| fuso orario | Fuso orario da applicare | “UTC”, l'impostazione predefinita è il fuso orario di runtime |
| TimeZoneName | Fuso orario della data | “corto”, “lungo” |
| giorno feriale | Giorno della settimana | “stretto”, “corto”, “lungo” |
| anno | Anno della data | “2 cifre”, “numerico” |
Esempio:
var formatter = new Intl.DateTimeFormat ('en-GB'); / * restituisce un formattatore in grado di formattare una data nel formato data inglese britannico * / var options = weekday: 'short'; var formatter = new Intl.DateTimeFormat ('en-GB', opzioni); / * restituisce un formattatore in grado di formattare una data nel formato data inglese britannico * insieme al giorno della settimana in notazione breve come 'Gio' per Giovedì * / Il formato funzione
L'istanza del DateTimeFormat l'oggetto ha una proprietà accessor (getter) chiamata formato che restituisce una funzione che formatta a Data basato sul locali e opzioni trovato nel DateTimeFormat esempio.
La funzione accetta a Data oggetto o non definito come argomento opzionale e restituisce a stringa nel formato data richiesto.
Nota: Se l'argomento è o non definito o non fornito, restituisce il valore di Date.now () nel formato data richiesto.
Ecco la sintassi:
new Intl.DateTimeFormat (). format () // restituirà la data corrente nel formato della data di runtime
E ora cerchiamo di codificare una semplice formattazione della data.
Cerchiamo di cambiare la lingua e vedere l'output.
Ora è il momento di esaminare le opzioni.
Il toLocaleDateString metodo
Invece di usare un formattatore come mostrato negli esempi precedenti, puoi anche usare Date.prototype.toLocaleString allo stesso modo con il locali e opzioni argomenti, sono simili ma si consiglia di utilizzare il DateTimeFormat oggetto quando si gestiscono troppe date nella propria applicazione.
var mydate = new Date ('2015/04/22'); var options = weekday: "short", year: "numeric", month: "long", day: "numeric"; console.log (mydate.toLocaleDateString ( 'it-IT', opzioni)); // restituisce "Wed, 22 aprile 2015" Prova se il locali sono supportati
Per controllare per il supportato locali, possiamo usare il metodo supportedLocalesOf di DateTimeFormat oggetto. Restituisce un array di tutte le locali di supporto o un array vuoto se nessuna delle impostazioni locali è supportata.
Per il test, aggiungiamo un locale fittizio “bla” nell'elenco delle località da verificare.
console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "blah", "fa-pes"])); // restituisce Array ["zh", "fa-pes"]
Supporto del browser
Alla fine di aprile 2015, i principali browser supportano l'API di internazionalizzazione.
Riferimenti
- ECMA Internazionale: specifica API di internazionalizzazione ECMAScript
- IANA: Registro di sottotag della lingua
- Norbert's Corner: l'API di internazionalizzazione ECMAScript
