Come formattare una data JavaScript


2222

In JavaScript, come posso formattare un oggetto data da stampare come 10-Aug-2010?


205
Come al solito: attenzione AL MESE È INDICE ZERO! Quindi gennaio è zero non uno ...
Christophe Roussy,

12
Inoltre, attenzione, myDate.getDay()non restituisce il giorno della settimana, ma la posizione del giorno della settimana correlata alla settimana. myDate.getDate()restituisce il giorno della settimana corrente .
Jimenemex,

3
Per formattare DateTimes in javascript usa l' Intl.DateTimeFormatoggetto. Lo descrivo nel mio post: Posta . Creo una soluzione online per la tua risposta tramite Intl.DateTimeFormat Check Online
Iman Bahrampour,

5
Puoi usaretoLocaleDateString
onmyway133 il

12
Javascript ha impiegato così tanto tempo per ottenere l'URL come oggetto standardizzato, in cui è possibile estrarre una chiave param query, acquisire il protocollo, acquisire il dominio di primo livello, ecc. Possono creare ES6 ES7 ma non riescono ancora a fissare una data standard programma di formattazione / analisi nel 2019? È come se stessero pensando "hmmm sì ... chi mai usando javascript avrebbe bisogno di occuparsi di orari e date su base regolare ...."
ahnbizcad,

Risposte:


1291

Per i formati di data delimitati su misura, è necessario estrarre i componenti della data (o dell'ora) da un DateTimeFormatoggetto (che fa parte dell'API di internazionalizzazione di ECMAScript ), quindi creare manualmente una stringa con i delimitatori desiderati.

Per fare ciò, puoi usare DateTimeFormat#formatToParts:

const date = new Date('2010-08-05')
const dateTimeFormat = new Intl.DateTimeFormat('en', { year: 'numeric', month: 'short', day: '2-digit' }) 
const [{ value: month },,{ value: day },,{ value: year }] = dateTimeFormat .formatToParts(date ) 

console.log(`${day}-${month}-${year }`)
console.log(`${day}👠${month}👢${year}`) // just for fun

Puoi anche estrarre le parti di DateTimeFormatuno a uno usando DateTimeFormat#format, ma nota che quando usi questo metodo, a partire da marzo 2020, c'è un bug nell'implementazione di ECMAScript quando si tratta di zeri iniziali in minuti e secondi (questo errore è eluso dall'approccio sopra).

const d = new Date('2010-08-05')
const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d)
const mo = new Intl.DateTimeFormat('en', { month: 'short' }).format(d)
const da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d)

console.log(`${da}-${mo}-${ye}`)

Quando si lavora con date e orari, di solito è la pena utilizzando una libreria (ad es. Moment.js , Luxon ) a causa delle molte complessità nascoste del campo.

Si noti che l'API per l'internazionalizzazione di ECMAScript, utilizzata nelle soluzioni precedenti non è supportata in IE10 ( 0,03% della quota di mercato globale dei browser nel febbraio 2020).


370
Prendi invece in considerazione l'idea di utilizzare una libreria come Moment.js o Date.js. Questo problema è stato risolto molte volte.
Benjamin Oakes,

242
Perché non includono una funzione Datenell'oggetto per farlo?
Nayan,

68
Un punto importante è che il metodo getMonth () restituisce un indice del mese in base 0, quindi ad esempio gennaio restituirà 0 febbraio restituirà 1, ecc ...
Marko

628
moment.js 2.9.0 è 11.6k con gzip, questo esempio è 211 byte con gzip.
mrzmyr,

26
Va notato che non dovresti mai e poi mai usare document.write (). Enormi problemi di sicurezza e prestazioni.
Matt Jensen,

2009

Se è necessario un controllo leggermente inferiore sulla formattazione rispetto alla risposta attualmente accettata, è Date#toLocaleDateStringpossibile utilizzare per creare rendering standard specifici della locale. Gli argomenti localee optionsconsentono alle applicazioni di specificare la lingua di cui devono essere utilizzate le convenzioni di formattazione e consentire una certa personalizzazione del rendering.

Esempi chiave di opzioni:

  1. giorno:
    la rappresentazione del giorno.
    I valori possibili sono "numerico", "2 cifre".
  2. giorno della settimana:
    la rappresentazione del giorno della settimana.
    I valori possibili sono "stretto", "corto", "lungo".
  3. anno:
    la rappresentazione dell'anno.
    I valori possibili sono "numerico", "2 cifre".
  4. mese:
    la rappresentazione del mese.
    I valori possibili sono "numerico", "2 cifre", "stretto", "corto", "lungo".
  5. hour:
    la rappresentazione dell'ora.
    I valori possibili sono "numerico", "2 cifre".
  6. minuto: la rappresentazione del minuto.
    I valori possibili sono "numerico", "2 cifre".
  7. secondo:
    la rappresentazione del secondo.
    I valori possibili sono "numerici", a 2 cifre ".

Tutti questi tasti sono opzionali. È possibile modificare il numero di valori delle opzioni in base alle proprie esigenze e ciò rifletterà anche la presenza di ciascun termine data / ora.

Nota: se si desidera solo configurare le opzioni di contenuto, ma utilizzare comunque le impostazioni internazionali correnti, il passaggio nullper il primo parametro provocherà un errore. Usa undefinedinvece.

Per diverse lingue:

  1. "en-US": per l'inglese
  2. "hi-IN": per l'hindi
  3. "ja-JP": per il giapponese

Puoi usare più opzioni di lingua.

Per esempio

var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var today  = new Date();

console.log(today.toLocaleDateString("en-US")); // 9/17/2016
console.log(today.toLocaleDateString("en-US", options)); // Saturday, September 17, 2016
console.log(today.toLocaleDateString("hi-IN", options)); // शनिवार, 17 सितंबर 2016

È inoltre possibile utilizzare il toLocaleString()metodo per lo stesso scopo. L'unica differenza è che questa funzione fornisce il tempo in cui non si passa alcuna opzione.

// Example
9/17/2016, 1:21:34 PM

Riferimenti:


45
Stava quasi per essere utilizzato moment.jsper un formato semplice. Fortunatamente ho fatto una ricerca su google extra e ho scoperto che esiste già un'API nativa. Salvato una dipendenza esterna. Eccezionale!
LeOn - Han Li,

21
Sembra che questa risposta dovrebbe essere la migliore risposta "attuale". Utilizzato anche l'opzione "hour12: true" per utilizzare il formato 12 ore contro 24 ore. Forse dovrebbe essere aggiunto al tuo elenco di riepilogo nella risposta.
Doug Knudsen,

14
Non ottengo voti positivi su questa risposta. Non risolve il problema nella domanda. (cioè dammi una data che assomigli al 10 agosto 2010). Usare toLocaleDateString () è abbastanza difficile. La libreria date.format sembra essere la soluzione migliore (almeno per gli utenti Node)
Iarwa1n

3
Se passare undefinedcome primo parametro locale sembra arbitrario, puoi invece passare il valore "default"per utilizzare le impostazioni locali del browser, secondo i documenti MDN developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
wbharding

3
@ Iarwa1n Questa risposta non è stata menzionata ma è possibile utilizzare toLocaleDateString per restituire solo alcune parti a cui è possibile unire come si desidera. Controlla la mia risposta qui sotto. date.toLocaleDateString("en-US", { day: 'numeric' }) + "-"+ date.toLocaleDateString("en-US", { month: 'short' }) + "-" + date.toLocaleDateString("en-US", { year: 'numeric' })dovrebbe dare16-Nov-2019
K Vij il

609

Utilizzare la libreria date.format :

var dateFormat = require('dateformat');
var now = new Date();
dateFormat(now, "dddd, mmmm dS, yyyy, h:MM:ss TT");

ritorna:

Saturday, June 9th, 2007, 5:46:21 PM 

dateformat su npm

http://jsfiddle.net/phZr7/1/


4
questa potrebbe sembrare la soluzione più lunga ma compressa e utilizzata su un sito che utilizza date un po 'sarebbe la soluzione migliore!
RobertPitt,

5
Questa soluzione è disponibile anche come pacchetto npm
David

19
Ci sono 14 problemi aperti con il plugin sopra. Ne ho trovato anche uno :(
Amit Kumar Gupta,

6
Ricevorequire is not defined
Hooli il

16
OP ha chiesto la soluzione JS
Luke Pring il

523

Se è necessario formattare rapidamente la data utilizzando pianura JavaScript, uso getDate, getMonth + 1, getFullYear, getHourse getMinutes:

var d = new Date();

var datestring = d.getDate()  + "-" + (d.getMonth()+1) + "-" + d.getFullYear() + " " +
d.getHours() + ":" + d.getMinutes();

// 16-5-2015 9:50

Oppure, se ne hai bisogno per essere riempito con zeri:

var datestring = ("0" + d.getDate()).slice(-2) + "-" + ("0"+(d.getMonth()+1)).slice(-2) + "-" +
    d.getFullYear() + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2);

// 16-05-2015 09:50

Puoi dirmi come ottenere il formato come lunedì 23 marzo 2018 ??
Sachin HR,

@SachinHR, vedere la risposta precedente: stackoverflow.com/a/34015511/4161032 . È toLocaleDateString()possibile formattare la data utilizzando i nomi di mese / giorno localizzati.
sebastian.i

12
puoi anche .toString().padStart(2, '0')
riempire gli

1
@DmitryoN, se necessario, l'anno può essere imbottito allo stesso modo:("000" + d.getFullYear()).slice(-4)
sebastian.i

4
@BennyJobigan Va notato che String.padStart()è disponibile solo da ECMAScript 2017.
JHH,

413

Bene, quello che volevo era convertire la data odierna in una stringa di date compatibile con MySQL come 23/06/2012 e utilizzare quella stringa come parametro in una delle mie query. La soluzione semplice che ho trovato è questa:

var today = new Date().toISOString().slice(0, 10);

Tieni presente che la soluzione di cui sopra non tiene conto dell'offset del fuso orario.

Potresti invece considerare l'utilizzo di questa funzione:

function toJSONLocal (date) {
    var local = new Date(date);
    local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
    return local.toJSON().slice(0, 10);
}

Questo ti darà la data corretta nel caso tu stia eseguendo questo codice verso l'inizio / la fine della giornata.


9
Puoi fare new Date(date + " UTC")per ingannare il fuso orario ed eliminare la riga setMinutes. Amico, JavaScript è sporco
Vajk Hermecz,

23
Versione compatibile Y10K: var today = new Date().toISOString().slice(0,-14):)
Alex Shaffer,

23
O cosìnew Date().toISOString().split('T')[0]
rofrol,

4
new Date().toISOString().slice(0, 16).replace('T',' ')per includere il tempo
Gerrie van Wyk,

3
Solo commentando che la mancanza di fuso orario non è un piccolo inconveniente "all'inizio / alla fine della giornata". In Australia, ad esempio, la data potrebbe essere sbagliata fino alle 11.00 circa - quasi la metà della giornata!
Steve Bennett,

230

Funzione di formattazione personalizzata:

Per formati fissi, una semplice funzione rende il lavoro. L'esempio seguente genera il formato internazionale AAAA-MM-GG:

function dateToYMD(date) {
    var d = date.getDate();
    var m = date.getMonth() + 1; //Month from 0 to 11
    var y = date.getFullYear();
    return '' + y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d);
}

console.log(dateToYMD(new Date(2017,10,5))); // Nov 5

Il formato OP può essere generato come:

function dateToYMD(date) {
    var strArray=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var d = date.getDate();
    var m = strArray[date.getMonth()];
    var y = date.getFullYear();
    return '' + (d <= 9 ? '0' + d : d) + '-' + m + '-' + y;
}
console.log(dateToYMD(new Date(2017,10,5))); // Nov 5

Nota: di solito non è una buona idea estendere le librerie standard JavaScript (ad es. Aggiungendo questa funzione al prototipo di Date).

Una funzione più avanzata potrebbe generare un output configurabile basato su un parametro di formato.

Se scrivere una funzione di formattazione è troppo lungo, ci sono molte librerie attorno alle quali lo fa. Alcune altre risposte li elencano già. Ma anche le crescenti dipendenze hanno una controparte.

Funzioni di formattazione ECMAScript standard:

Dalle versioni più recenti di ECMAScript, la Dateclasse ha alcune funzioni di formattazione specifiche:

toDateString : a seconda dell'implementazione , mostra solo la data.

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.todatestring

new Date().toDateString(); // e.g. "Fri Nov 11 2016"

toISOString : mostra data e ora ISO 8601.

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.toisostring

new Date().toISOString(); // e.g. "2016-11-21T08:00:00.000Z"

toJSON : Stringifier per JSON.

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tojson

new Date().toJSON(); // e.g. "2016-11-21T08:00:00.000Z"

toLocaleDateString : dipende dall'implementazione , una data in formato locale.

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tolocaledatestring

new Date().toLocaleDateString(); // e.g. "21/11/2016"

toLocaleString : dipende dall'implementazione , una data e ora in formato locale.

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tolocalestring

new Date().toLocaleString(); // e.g. "21/11/2016, 08:00:00 AM"

toLocaleTimeString : dipende dall'implementazione , un'ora nel formato locale.

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tolocaletimestring

new Date().toLocaleTimeString(); // e.g. "08:00:00 AM"

toString : toString generico per la data.

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tostring

new Date().toString(); // e.g. "Fri Nov 21 2016 08:00:00 GMT+0100 (W. Europe Standard Time)"

Nota: è possibile generare output personalizzati da questi formati>

new Date().toISOString().slice(0,10); //return YYYY-MM-DD

Esempi di frammenti:

console.log("1) "+  new Date().toDateString());
console.log("2) "+  new Date().toISOString());
console.log("3) "+  new Date().toJSON());
console.log("4) "+  new Date().toLocaleDateString());
console.log("5) "+  new Date().toLocaleString());
console.log("6) "+  new Date().toLocaleTimeString());
console.log("7) "+  new Date().toString());
console.log("8) "+  new Date().toISOString().slice(0,10));


3
Grazie per l'ultimo .. Utile per impostare il valore della data degli input di data HTML.
daCoda,

new Date().toLocaleDateString()mm/dd/yyyynon ti dà per dd/mm/yyyyfavore correggere quello.
Aarvy,

1
@RajanVerma: toLocaleDateString fornisce la tua locale, che probabilmente è mm / gg / aaaa perché sei negli Stati Uniti. Qui, la locale per data è gg / mm / aaaa (che è esattamente il punto di "locale"). Ho scritto "ad esempio" perché non è la specifica, ma un esempio di output.
Adrian Maire,

177

Se stai già utilizzando l'interfaccia utente di jQuery nel tuo progetto, puoi farlo in questo modo:

var formatted = $.datepicker.formatDate("M d, yy", new Date("2014-07-08T09:02:21.377"));

// formatted will be 'Jul 8, 2014'

Alcune opzioni per il formato della data di datepicker con cui giocare sono disponibili qui .


13
Come ho detto - se jQueryUI è già utilizzato nel progetto - perché non riutilizzare la funzione di formattazione della data di datepicker? Ehi ragazzi, non capisco perché sto ricevendo un voto negativo sulla mia risposta? Spiega per favore.
Dmitry Pavlov,

7
Potrebbe essere perché qualcuno potrebbe includere l'interfaccia utente di jQuery solo per la funzione del formato della data, oppure potrebbe essere perché il datepicker è una parte facoltativa della libreria, ma probabilmente è perché odiare jQuery è di moda.
Sennett,

12
Non penso che sia possibile evitare completamente tutte le strane decisioni che qualcuno potrebbe prendere per errore o per mancanza di senso.
Dmitry Pavlov,

7
@sennett: odiare jQuery è di moda? Quindi sto camminando con i pantaloni a metà delle gambe, suppongo ... il che è praticamente quello che cercare di programmare senza jQuery è stato per la maggior parte della storia di JavaScript ...
Michael Scheper,

5
In ogni caso, questa è una risposta utile e del tutto ragionevole: ancora una volta, il 70% dei siti Web utilizza jQuery. Non dovrebbe essere sottoposto a downgrade a causa delle credenze religiose degli sviluppatori.
Michael Scheper,

133

Penso che puoi semplicemente usare il metodo Date non standardtoLocaleFormat(formatString)

formatString: una stringa di formato nello stesso formato previsto dalla strftime()funzione in C.

var today = new Date();
today.toLocaleFormat('%d-%b-%Y'); // 30-Dec-2011

Riferimenti:


160
toLocaleFormat () sembra funzionare solo in Firefox. Sia IE che Chrome stanno fallendo per me.
fitzgeraldsteele,

16
Chrome ha il metodo .toLocaleString ('en'). A quanto pare il nuovo browser supporta questo developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
apocalypz


6
questa sarebbe la soluzione migliore se tutti potessero realizzarla. accidenti a te / chrome
santa,

6
@santa: davvero. Forse c'era una buona ragione per non seguire l'esempio di Mozilla su questo, ma il fatto che anche ES6 non abbia una funzione standard per questo dimostra che è ancora un linguaggio di un hacker, non un linguaggio di sviluppo.
Michael Scheper,

105

Il semplice JavaScript è la scelta migliore per i piccoli oneteri.

D'altra parte, se hai bisogno di altro materiale per appuntamenti, MomentJS è un'ottima soluzione.

Per esempio:

moment().format('YYYY-MM-DD HH:m:s');     // now() -> 2015-03-24 14:32:20
moment("20111031", "YYYYMMDD").fromNow(); // 3 years ago
moment("20120620", "YYYYMMDD").fromNow(); // 3 years ago
moment().startOf('day').fromNow();        // 11 hours ago
moment().endOf('day').fromNow();          // in 13 hours

2
importante da menzionare: non usare a YYYYmeno che non si conosca la differenza tra YYYYe yyyy: stackoverflow.com/questions/15133549/…
Domin

@Domin specifico di NSDateFormatter in iOS, utilizzato ad esempio da Objective-C o Swift. Questa domanda riguarda Javascript nel browser e questa risposta utilizza MomentJS, in cui YYYY(non yyyy) è l'anno standard e GGGG(non YYYY) è l'anno basato sulla settimana ISO.
Mark Reed il

2
Il momento non è obsoleto al 100% @Gerry
Liam

97

Nei browser moderni (*) , puoi semplicemente fare questo:

var today = new Date().toLocaleDateString('en-GB', {
    day : 'numeric',
    month : 'short',
    year : 'numeric'
}).split(' ').join('-');

Uscita se eseguita oggi (24 gennaio 2016):

'24-Jan-2016'

(*) Secondo MDN , "browser moderni" significa Chrome 24+, Firefox 29+, Internet Explorer 11, Edge 12+, Opera 15+ e Safari nightly build .


C'è un modo per verificare se questa funzione è supportata e, in caso contrario, per impostazione predefinita è una soluzione più semplice?
James Wierzba,

@JamesWierzba: potresti usare questo polyfill !
John Slegers,

Questo non è nemmeno elencato su caniuse.com: /
Charles Wood,

51

Si dovrebbe avere uno sguardo a date.js . Aggiunge molti utili aiutanti per lavorare con le date, ad esempio nel tuo caso:

var date = Date.parse('2010-08-10');
console.log(date.toString('dd-MMM-yyyy'));

Per iniziare: http://www.datejs.com/2007/11/27/getting-started-with-datejs/


Grazie. Questa è una libreria molto completa e completa, con un ingombro ridotto.
mitcheljh,

Penso che attualmente sto ricevendo un numero da Date.parse mentre let = date = new Date (fromString) ha più funzioni. Purtroppo, con mia grande sorpresa, anche String sembra mostrare un valore predefinito senza interpretare l'argomento passato per formattarlo. L'uso di NodeJS 11+ per DataString è un output più breve ma non richiede formattazione. Tutto quello che vedo è un molto contorto a VoiceDateString
Master James

38

Posso ottenere il formato richiesto in una riga senza librerie e senza metodi Date, solo regex:

var d = (new Date()).toString().replace(/\S+\s(\S+)\s(\d+)\s(\d+)\s.*/,'$2-$1-$3');
// date will be formatted as "14-Oct-2015" (pass any date object in place of 'new Date()')

Nei miei test, questo funziona in modo affidabile nei principali browser (Chrome, Safari, Firefox e IE.) Come sottolineato da @RobG, l'output di Date.prototype.toString () dipende dall'implementazione, quindi prova l'output per essere sicuro funziona perfettamente nel tuo motore JavaScript. Puoi anche aggiungere del codice per testare l'output della stringa e assicurarti che corrisponda a quello che ti aspetti prima di eseguire la sostituzione di regex.


console.log(new Date().toString().replace(/\S+\s(\S+)\s(\d+)\s(\d+)\s.*/,'$2-$1-$3'));
John,

@ André - Sono d'accordo. Se questo fosse il mio codice, aggiungerei sicuramente un commento a fianco che spiega la regex e fornisce un esempio dell'input e dell'output corrispondente.
JD Smith,

che ne dici di part time (HH: mm: ss)?
Unruledboy,

@unruledboy var d = (new Date ()). toString (). replace (/ \ S + \ s (\ S +) \ s (\ d +) \ s (\ d +) \ s (\ S +) \ s. * / , "$ 2- $ 1- $ 3 $ 4"); - o per ottenere solo la parte del tempo senza la data stessa, utilizzare: var d = (new Date ()). toString (). replace (/ \ S + \ s (\ S +) \ s (\ d +) \ s (\ d +) \ s (\ S +) \ s * /, '$ 4').;
JD Smith,

37

@ Sébastien - in alternativa tutto il supporto del browser

new Date(parseInt(496407600)*1000).toLocaleDateString('de-DE', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
}).replace(/\./g, '/');

Documentazione: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString


5
Invece di fare .replace (), potresti semplicemente usare 'en-GB' come locale. :)
Roberto14,

1
È davvero bello, ad es. new Date().toLocaleDateString("en-EN", {month: "short", weekday: "short", day: "2-digit", year: "numeric"})Ritorna"Wed, Sep 06, 2017"
Peter T.

37

OK , abbiamo qualcosa chiamato Intl che è molto utile per formattare una data in JavaScript in questi giorni:

La tua data come di seguito:

var date = '10/8/2010';

E cambi a Data usando la nuova Data () come sotto:

date = new Date(date);

E ora puoi formattarlo come preferisci usando un elenco di locali come di seguito:

date = new Intl.DateTimeFormat('en-AU').format(date); // Australian date format: "8/10/2010" 


date = new Intl.DateTimeFormat('en-US').format(date); // USA date format: "10/8/2010" 


date = new Intl.DateTimeFormat('ar-EG').format(date);  // Arabic date format: "٨‏/١٠‏/٢٠١٠"

Se vuoi esattamente il formato che hai menzionato sopra, puoi fare:

date = new Date(Date.UTC(2010, 7, 10, 0, 0, 0));
var options = {year: "numeric", month: "short", day: "numeric"};
date = new Intl.DateTimeFormat("en-AU", options).format(date).replace(/\s/g, '-');

E il risultato sarà:

"10-Aug-2010"

Per ulteriori vedere l' API Intl e Intl.DateTimeFormat documentazione.


Non supportato da IE
Pants

È solo da IE11, IE10- sono stati fuori dal mondo prima che esistesse, quindi è comprensibile. 92% da caniuse, che è abbastanza buono caniuse.com/#search=datetimeformat
Tofandel

32

Utilizzando un modello di stringa ECMAScript Edition 6 (ES6 / ES2015):

let d = new Date();
let formatted = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;

Se è necessario modificare i delimitatori:

const delimiter = '/';
let formatted = [d.getFullYear(), d.getMonth() + 1, d.getDate()].join(delimiter);

30

Soluzione imballata: Luxon

Se si desidera utilizzare un'unica soluzione per adattarsi a tutti, si consiglia vivamente di utilizzare Luxon (una versione modernizzata di Moment.js ) che esegue anche la formattazione in molte lingue / lingue e tonnellate di altre funzionalità.

Luxon è ospitato sul sito Web Moment.js e sviluppato da uno sviluppatore Moment.js perché Moment.js ha delle limitazioni che lo sviluppatore ha voluto affrontare ma non ha potuto.

Installare:

npm install luxonoppure yarn add luxon(visitare il link per altri metodi di installazione)

Esempio:

luxon.DateTime.fromISO('2010-08-10').toFormat('yyyy-LLL-dd');

I rendimenti:

10-Ago-2010

Soluzione manuale

Utilizzando una formattazione simile a Moment.js, Class DateTimeFormatter (Java) e Class SimpleDateFormat (Java) , ho implementato una soluzione completa in formatDate(date, patternStr)cui il codice è facile da leggere e modificare. È possibile visualizzare data, ora, AM / PM, ecc. Vedere il codice per ulteriori esempi.

Esempio:

formatDate(new Date(), 'EEEE, MMMM d, yyyy HH:mm:ss:S')

( formatDateè implementato nello snippet di codice seguente)

I rendimenti:

Venerdì 12 ottobre 2018 18: 11: 23: 445

Prova il codice facendo clic su "Esegui snippet di codice".

Modelli di data e ora

yy= Anno a 2 cifre; yyyy= anno intero

M= mese cifra; MM= Mese a 2 cifre; MMM= nome breve del mese; MMMM= nome completo del mese

EEEE= nome completo del giorno della settimana; EEE= nome del giorno della settimana breve

d= giorno della cifra; dd= Giorno a 2 cifre

h= ore am / pm; hh= Ore a 2 cifre am / pm; H= ore; HH= Ore a 2 cifre

m= minuti; mm= Minuti a 2 cifre; aaa= AM / PM

s= secondi; ss= Secondi a 2 cifre

S = millisecondi

var monthNames = [
  "January", "February", "March", "April", "May", "June", "July",
  "August", "September", "October", "November", "December"
];
var dayOfWeekNames = [
  "Sunday", "Monday", "Tuesday",
  "Wednesday", "Thursday", "Friday", "Saturday"
];
function formatDate(date, patternStr){
    if (!patternStr) {
        patternStr = 'M/d/yyyy';
    }
    var day = date.getDate(),
        month = date.getMonth(),
        year = date.getFullYear(),
        hour = date.getHours(),
        minute = date.getMinutes(),
        second = date.getSeconds(),
        miliseconds = date.getMilliseconds(),
        h = hour % 12,
        hh = twoDigitPad(h),
        HH = twoDigitPad(hour),
        mm = twoDigitPad(minute),
        ss = twoDigitPad(second),
        aaa = hour < 12 ? 'AM' : 'PM',
        EEEE = dayOfWeekNames[date.getDay()],
        EEE = EEEE.substr(0, 3),
        dd = twoDigitPad(day),
        M = month + 1,
        MM = twoDigitPad(M),
        MMMM = monthNames[month],
        MMM = MMMM.substr(0, 3),
        yyyy = year + "",
        yy = yyyy.substr(2, 2)
    ;
    // checks to see if month name will be used
    patternStr = patternStr
      .replace('hh', hh).replace('h', h)
      .replace('HH', HH).replace('H', hour)
      .replace('mm', mm).replace('m', minute)
      .replace('ss', ss).replace('s', second)
      .replace('S', miliseconds)
      .replace('dd', dd).replace('d', day)
      
      .replace('EEEE', EEEE).replace('EEE', EEE)
      .replace('yyyy', yyyy)
      .replace('yy', yy)
      .replace('aaa', aaa);
    if (patternStr.indexOf('MMM') > -1) {
        patternStr = patternStr
          .replace('MMMM', MMMM)
          .replace('MMM', MMM);
    }
    else {
        patternStr = patternStr
          .replace('MM', MM)
          .replace('M', M);
    }
    return patternStr;
}
function twoDigitPad(num) {
    return num < 10 ? "0" + num : num;
}
console.log(formatDate(new Date()));
console.log(formatDate(new Date(), 'dd-MMM-yyyy')); //OP's request
console.log(formatDate(new Date(), 'EEEE, MMMM d, yyyy HH:mm:ss.S aaa'));
console.log(formatDate(new Date(), 'EEE, MMM d, yyyy HH:mm'));
console.log(formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss.S'));
console.log(formatDate(new Date(), 'M/dd/yyyy h:mmaaa'));

Grazie @Gerry per aver cresciuto Luxon.


1
A proposito, la SimpleDateFormatclasse problematica è stata soppiantata anni fa dalla java.time.format.DateTimeFormatterclasse.
Basil Bourque,

1
@BasilBourque, notato. Entrambi usano gli stessi schemi. Sono stato su un progetto pre-Java8 per 5 anni, quindi non sono mai stato esposto alle novità. Grazie!
lewdev,

Vedi il progetto ThreeTen-Backport per Java 6 e 7, per ottenere la maggior parte delle funzionalità java.time con API quasi identiche.
Basil Bourque,

@BasilBourque grazie per il riferimento, ma non lavoro più su quel progetto ma lo terrò sicuramente a mente quando verrà fuori.
lewdev,

2
il momento è obsoleto, usa luxon
Gerry l'

19

Ecco un po 'di codice che ho appena scritto per gestire la formattazione della data per un progetto a cui sto lavorando. Imita la funzionalità di formattazione della data PHP per soddisfare le mie esigenze. Sentiti libero di usarlo, sta semplicemente estendendo l'oggetto Date () già esistente. Questa potrebbe non essere la soluzione più elegante ma funziona per le mie esigenze.

var d = new Date(); 
d_string = d.format("m/d/Y h:i:s");

/**************************************
 * Date class extension
 * 
 */
    // Provide month names
    Date.prototype.getMonthName = function(){
        var month_names = [
                            'January',
                            'February',
                            'March',
                            'April',
                            'May',
                            'June',
                            'July',
                            'August',
                            'September',
                            'October',
                            'November',
                            'December'
                        ];

        return month_names[this.getMonth()];
    }

    // Provide month abbreviation
    Date.prototype.getMonthAbbr = function(){
        var month_abbrs = [
                            'Jan',
                            'Feb',
                            'Mar',
                            'Apr',
                            'May',
                            'Jun',
                            'Jul',
                            'Aug',
                            'Sep',
                            'Oct',
                            'Nov',
                            'Dec'
                        ];

        return month_abbrs[this.getMonth()];
    }

    // Provide full day of week name
    Date.prototype.getDayFull = function(){
        var days_full = [
                            'Sunday',
                            'Monday',
                            'Tuesday',
                            'Wednesday',
                            'Thursday',
                            'Friday',
                            'Saturday'
                        ];
        return days_full[this.getDay()];
    };

    // Provide full day of week name
    Date.prototype.getDayAbbr = function(){
        var days_abbr = [
                            'Sun',
                            'Mon',
                            'Tue',
                            'Wed',
                            'Thur',
                            'Fri',
                            'Sat'
                        ];
        return days_abbr[this.getDay()];
    };

    // Provide the day of year 1-365
    Date.prototype.getDayOfYear = function() {
        var onejan = new Date(this.getFullYear(),0,1);
        return Math.ceil((this - onejan) / 86400000);
    };

    // Provide the day suffix (st,nd,rd,th)
    Date.prototype.getDaySuffix = function() {
        var d = this.getDate();
        var sfx = ["th","st","nd","rd"];
        var val = d%100;

        return (sfx[(val-20)%10] || sfx[val] || sfx[0]);
    };

    // Provide Week of Year
    Date.prototype.getWeekOfYear = function() {
        var onejan = new Date(this.getFullYear(),0,1);
        return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
    } 

    // Provide if it is a leap year or not
    Date.prototype.isLeapYear = function(){
        var yr = this.getFullYear();

        if ((parseInt(yr)%4) == 0){
            if (parseInt(yr)%100 == 0){
                if (parseInt(yr)%400 != 0){
                    return false;
                }
                if (parseInt(yr)%400 == 0){
                    return true;
                }
            }
            if (parseInt(yr)%100 != 0){
                return true;
            }
        }
        if ((parseInt(yr)%4) != 0){
            return false;
        } 
    };

    // Provide Number of Days in a given month
    Date.prototype.getMonthDayCount = function() {
        var month_day_counts = [
                                    31,
                                    this.isLeapYear() ? 29 : 28,
                                    31,
                                    30,
                                    31,
                                    30,
                                    31,
                                    31,
                                    30,
                                    31,
                                    30,
                                    31
                                ];

        return month_day_counts[this.getMonth()];
    } 

    // format provided date into this.format format
    Date.prototype.format = function(dateFormat){
        // break apart format string into array of characters
        dateFormat = dateFormat.split("");

        var date = this.getDate(),
            month = this.getMonth(),
            hours = this.getHours(),
            minutes = this.getMinutes(),
            seconds = this.getSeconds();
        // get all date properties ( based on PHP date object functionality )
        var date_props = {
            d: date < 10 ? '0'+date : date,
            D: this.getDayAbbr(),
            j: this.getDate(),
            l: this.getDayFull(),
            S: this.getDaySuffix(),
            w: this.getDay(),
            z: this.getDayOfYear(),
            W: this.getWeekOfYear(),
            F: this.getMonthName(),
            m: month < 10 ? '0'+(month+1) : month+1,
            M: this.getMonthAbbr(),
            n: month+1,
            t: this.getMonthDayCount(),
            L: this.isLeapYear() ? '1' : '0',
            Y: this.getFullYear(),
            y: this.getFullYear()+''.substring(2,4),
            a: hours > 12 ? 'pm' : 'am',
            A: hours > 12 ? 'PM' : 'AM',
            g: hours % 12 > 0 ? hours % 12 : 12,
            G: hours > 0 ? hours : "12",
            h: hours % 12 > 0 ? hours % 12 : 12,
            H: hours,
            i: minutes < 10 ? '0' + minutes : minutes,
            s: seconds < 10 ? '0' + seconds : seconds           
        };

        // loop through format array of characters and add matching data else add the format character (:,/, etc.)
        var date_string = "";
        for(var i=0;i<dateFormat.length;i++){
            var f = dateFormat[i];
            if(f.match(/[a-zA-Z]/g)){
                date_string += date_props[f] ? date_props[f] : '';
            } else {
                date_string += f;
            }
        }

        return date_string;
    };
/*
 *
 * END - Date class extension
 * 
 ************************************/

18

Una soluzione JavaScript senza utilizzare alcuna libreria esterna:

var now = new Date()
months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
var formattedDate = now.getDate() + "-" + months[now.getMonth()] + "-" + now.getFullYear()
alert(formattedDate)



15

Abbiamo molte soluzioni per questo, ma penso che il migliore sia Moment.js. Quindi suggerisco personalmente di usare Moment.js per le operazioni di data e ora.

console.log(moment().format('DD-MMM-YYYY'));
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>


perché includi jquery?
Ced

1
Ohh scusa non è necessario. Grazie @Ced
Vijay Maheriya,

come fornire la data che devo a moment.js? Penso che ci voglia sempre tempo corrente.
Dave Ranjan,

1
@DaveRanjan penso che devi convertire la tua data personalizzata. Quindi usa questo: console.log (moment ('2016-08-10'). Format ('DD-MMM-YYYY'));
Vijay Maheriya,

Sì, l'ho capito più tardi. Grazie :)
Dave Ranjan il

15

Un modo utile e flessibile per formattare DateTimes in JavaScript è Intl.DateTimeFormat:

var date = new Date();
var options = { year: 'numeric', month: 'short', day: '2-digit'};
var _resultDate = new Intl.DateTimeFormat('en-GB', options).format(date);
// The _resultDate is: "12 Oct 2017"
// Replace all spaces with - and then log it.
console.log(_resultDate.replace(/ /g,'-'));

Il risultato è: "12-Oct-2017"

I formati di data e ora possono essere personalizzati usando l'argomento opzioni.

L' Intl.DateTimeFormatoggetto è un costruttore per oggetti che abilitano la formattazione della data e dell'ora sensibili al linguaggio.

Sintassi

new Intl.DateTimeFormat([locales[, options]])
Intl.DateTimeFormat.call(this[, locales[, options]])

parametri

locali

Opzionale. Una stringa con un tag di lingua BCP 47 o una matrice di tali stringhe. Per la forma generale e l'interpretazione dell'argomento locales, vedere la pagina Intl. Sono consentite le seguenti chiavi di estensione Unicode:

nu
Numbering system. Possible values include: "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".
ca
Calendar. Possible values include: "buddhist", "chinese", "coptic", "ethioaa", "ethiopic", "gregory", "hebrew", "indian", "islamic", "islamicc", "iso8601", "japanese", "persian", "roc".

Opzioni

Opzionale. Un oggetto con alcune o tutte le seguenti proprietà:

localeMatcher

L'algoritmo di corrispondenza locale da utilizzare. I valori possibili sono "lookup"e "best fit"; il valore predefinito è "best fit". Per informazioni su questa opzione, consultare la pagina Intl.

fuso orario

Il fuso orario da utilizzare. L'unico valore che le implementazioni devono riconoscere è "UTC"; il valore predefinito è il fuso orario predefinito del runtime. Implementazioni possono anche riconoscere i nomi di fuso orario del database dei fusi orari IANA, come ad esempio "Asia/Shanghai", "Asia/Kolkata", "America/New_York".

hour12

Se utilizzare il tempo di 12 ore (rispetto al tempo di 24 ore). I valori possibili sono truee false; l'impostazione predefinita dipende dalle impostazioni locali.

formatMatcher

L'algoritmo di corrispondenza del formato da utilizzare. I valori possibili sono "basic"e "best fit"; il valore predefinito è "best fit". Vedere i paragrafi seguenti per informazioni sull'uso di questa proprietà.

Le seguenti proprietà descrivono i componenti data-ora da utilizzare nell'output formattato e le loro rappresentazioni desiderate. Le implementazioni sono necessarie per supportare almeno i seguenti sottoinsiemi:

weekday, year, month, day, hour, minute, second
weekday, year, month, day
year, month, day
year, month
month, day
hour, minute, second
hour, minute

Le implementazioni possono supportare altri sottoinsiemi e le richieste verranno negoziate con tutte le combinazioni di rappresentazioni di sottoinsiemi disponibili per trovare la corrispondenza migliore. Per questa negoziazione sono disponibili due algoritmi e selezionati dalla proprietà formatMatcher: A completamente specificato"basic" algoritmo e un algoritmo "best fit" dipendente dall'implementazione.

giorno feriale

La rappresentazione del giorno della settimana. I valori possibili sono "narrow", "short", "long".

era

La rappresentazione dell'era. I valori possibili sono "narrow", "short", "long".

anno

La rappresentazione dell'anno. I valori possibili sono "numeric", "2-digit".

mese

La rappresentazione del mese. I valori possibili sono "numeric", "2-digit", "narrow", "short", "long".

giorno

La rappresentazione del giorno. I valori possibili sono "numeric","2-digit" .

ora

La rappresentazione dell'ora. I valori possibili sono "numeric", "2-digit".

minuto

La rappresentazione del minuto. I valori possibili sono "numeric", "2-digit".

secondo

La rappresentazione del secondo. I valori possibili sono "numeric", "2-digit".

TimeZoneName

La rappresentazione del nome del fuso orario. I valori possibili sono "short", "long". Il valore predefinito per ciascuna proprietà del componente data-ora non è definito, ma se tutte le proprietà del componente non sono definite, si presume che siano anno, mese e giorno "numeric".

Controlla online

Più dettagli


15

Questo può aiutare con il problema:

var d = new Date();

var options = {   
    day: 'numeric',
    month: 'long', 
    year: 'numeric'
};

console.log(d.toLocaleDateString('en-ZA', options));

Data per individuare il formato


2
o d.toLocaleDateString('en-US', options);se sei negli Stati Uniti.
BishopZ,

Questa era la mia soluzione. Grazie.
Steven Rogers,

13

Ecco come ho implementato i miei plugin npm

var monthNames = [
  "January", "February", "March",
  "April", "May", "June", "July",
  "August", "September", "October",
  "November", "December"
];

var Days = [
  "Sunday", "Monday", "Tuesday", "Wednesday",
  "Thursday", "Friday", "Saturday"
];

var formatDate = function(dt,format){
  format = format.replace('ss', pad(dt.getSeconds(),2));
  format = format.replace('s', dt.getSeconds());
  format = format.replace('dd', pad(dt.getDate(),2));
  format = format.replace('d', dt.getDate());
  format = format.replace('mm', pad(dt.getMinutes(),2));
  format = format.replace('m', dt.getMinutes());
  format = format.replace('MMMM', monthNames[dt.getMonth()]);
  format = format.replace('MMM', monthNames[dt.getMonth()].substring(0,3));
  format = format.replace('MM', pad(dt.getMonth()+1,2));
  format = format.replace(/M(?![ao])/, dt.getMonth()+1);
  format = format.replace('DD', Days[dt.getDay()]);
  format = format.replace(/D(?!e)/, Days[dt.getDay()].substring(0,3));
  format = format.replace('yyyy', dt.getFullYear());
  format = format.replace('YYYY', dt.getFullYear());
  format = format.replace('yy', (dt.getFullYear()+"").substring(2));
  format = format.replace('YY', (dt.getFullYear()+"").substring(2));
  format = format.replace('HH', pad(dt.getHours(),2));
  format = format.replace('H', dt.getHours());
  return format;
}

pad = function(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}

A quale pacchetto ti riferisci?
lbrahim,

Questo ha un bug: i nomi dei mesi vengono sostituiti per primi, quindi verrà sostituito anche il nome del mese. Ad esempio Marchdiventerà 3archcon questo codice.
ntaso,

1
Cambia riga per 'M'to format = format.replace("M(?!M)", (dt.getMonth()+1).toString());e mettila sopra la riga con'MMMM'
ntaso il

9
var today = new Date();
var formattedToday = today.toLocaleDateString() + ' ' + today.toLocaleTimeString();

8

Sugar.js ha eccellenti estensioni all'oggetto Date, incluso un Date.format metodo .

Esempi dalla documentazione:

Date.create().format('{Weekday} {Month} {dd}, {yyyy}');

Date.create().format('{12hr}:{mm}{tt}')

8

Per chiunque cerchi una soluzione ES6 davvero semplice da copiare, incollare e adottare:

const dateToString = d => `${d.getFullYear()}-${('00' + (d.getMonth() + 1)).slice(-2)}-${('00' + d.getDate()).slice(-2)}` 

// how to use:
const myDate = new Date(Date.parse('04 Dec 1995 00:12:00 GMT'))
console.log(dateToString(myDate)) // 1995-12-04


8

A partire dal 2019, sembra che tu possa arrivare a LoftDateString per restituire solo alcune parti e quindi puoi unirle come desideri:

var date = new Date();

console.log(date.toLocaleDateString("en-US", { day: 'numeric' }) 
            + "-"+ date.toLocaleDateString("en-US", { month: 'short' })
            + "-" + date.toLocaleDateString("en-US", { year: 'numeric' }) );

> 16-Nov-2019

console.log(date.toLocaleDateString("en-US", { month: 'long' }) 
            + " " + date.toLocaleDateString("en-US", { day: 'numeric' }) 
            + ", " + date.toLocaleDateString("en-US", { year: 'numeric' }) );

> November 16, 2019

8

Dovresti dare un'occhiata a DayJs È un remake di momentJs ma l'architettura modulare orientata in modo più leggero.

Alternativa veloce a 2kB a Moment.js con la stessa API moderna

Day.js è una libreria JavaScript minimalista che analizza, convalida, manipola e visualizza date e orari per i browser moderni con un'API ampiamente compatibile con Moment.js. Se usi Moment.js, sai già come usare Day.js.

var date = Date.now();
const formatedDate = dayjs(date).format("YYYY-MM-DD")
console.log(formatedDate);
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.8.16/dayjs.min.js" crossorigin="anonymous"></script>


7

Per ottenere "10-ago-2010", prova:

var date = new Date('2010-08-10 00:00:00');
date = date.toLocaleDateString(undefined, {day:'2-digit'}) + '-' + date.toLocaleDateString(undefined, {month:'short'}) + '-' + date.toLocaleDateString(undefined, {year:'numeric'})

Per il supporto del browser, vedere toLocaleDateString .


Non avevo bisogno di un "-", ecco una versione più breve con ora, data e fuso orario! data = nuova data (); date.toLocaleDateString (non definito, {giorno: '2 cifre', mese: 'breve', anno: 'numerico', ora: 'numerico', minuto: 'numerico', minuto: timeZoneName: 'short'}); :)
varun,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.