Un modo definitivo di formattare le date per i siti internazionali

I formati delle date variano in base alla regione e alla lingua, pertanto è sempre utile trovare un modo per visualizzare le date per gli utenti, in base alla 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.

In questo post esamineremo la formattazione della data utilizzando questa API.

Conoscere le impostazioni locali dell'utente

Per mostrare la data secondo le impostazioni locali preferite dell'utente, prima 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 regionali preferite nella pagina web.

Tuttavia, se questa non è un'opzione, è possibile interpretare l'intestazione della richiesta Accept-Language o leggere i valori di navigator.language (per Chrome e Firefox) o navigator.browserLanguage (per IE).

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 .

 se (window.hasOwnProperty (("Intl") && typeof Intl === "object") {// API di internazionalizzazione è presente, usiamola} 

L'oggetto Intl

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 l'ora della data in base alle diverse lingue.

L'oggetto DateTimeFormat

Il costruttore DateTimeFormat accetta due argomenti facoltativi;

• locales : una stringa o una serie di stringhe che rappresentano i tag della lingua, ad esempio; "De" per la lingua tedesca, "en-GB" per l'inglese utilizzato nel Regno Unito. Se non viene menzionato un tag della lingua, la locale predefinita sarà quella del runtime.
• options : un oggetto le cui proprietà vengono utilizzate per personalizzare il formattatore. Ha le seguenti proprietà:

Esempio:

 var formatter = new Intl.DateTimeFormat ('en-GB'); / * restituisce un formattatore che può 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ì * / 

La funzione di formattazione

L'istanza dell'oggetto DateTimeFormat ha un proprietà accessor (getter) chiamato format che restituisce una funzione che formatta una Date base alle locales e alle options trovate nell'istanza DateTimeFormat .

La funzione accetta un oggetto Date o undefined come argomento opzionale e restituisce una string nel formato data richiesto.

Nota: se l'argomento è undefined o non fornito, restituisce il valore di Date.now() nel formato data richiesto.

Ecco la sintassi:

 nuovo 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 metodo toLocaleDateString

Invece di usare un formattatore come mostrato negli esempi precedenti, puoi usare anche Date.prototype.toLocaleString nello stesso modo con gli argomenti locales e options, sono simili ma si consiglia di usare l'oggetto DateTimeFormat quando si hanno troppe date nella tua 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" 

Verifica se le impostazioni locali sono supportate

Per verificare le locales supportate, possiamo usare il metodo supportedLocalesOf dell'oggetto DateTimeFormat . 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 "blah" nella lista delle impostazioni locali 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.

• ECMA International: specifica API di internazionalizzazione ECMAScript
• IANA : registro sottotag della lingua
• Norbert's Corner: l'API di internazionalizzazione ECMAScript

Progettare per Natale: l'ultima pila di risorse che ti serve

Il Natale è dietro l'angolo . Per i designer e gli altri creativi, il Natale non è solo una stagione di dare e un'opportunità per trascorrere del tempo con parenti e amici, ma anche una grande occasione per divertenti progetti di design per le vacanze. Se hai difficoltà a cercare varie risorse natalizie per rendere più vivaci i tuoi progetti per le vacanze, non cercare oltre perché abbiamo fatto il lavoro per te.In qu

(Consigli tecnici e di design)

Come il tuo tipo di personalità MBTI può influenzare le tue scelte di carriera

Sviluppato negli anni '60 dalla coppia madre figlia Katherine Cook Briggs e Isabel Briggs Myer, il Myer-Briggs Type Indicator (MBTI) è basato su teorie del famoso psicologo Carl Gustav Jung. Ogni anno, oltre 1, 5 milioni di test sulla personalità di MBTI vengono condotti su diversi individui per aiutarli a esplorare vari obiettivi .S

(Consigli tecnici e di design)