Come formattare una data JavaScript

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

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).

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:

• toLocaleString()

• toLocaleDateString()

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/

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

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.

• Esempio: http://jsfiddle.net/simo/sapuhzmm/
• Date.toISOString
• Date.toJSON
• String.slice

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));

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 .

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:

• tolocaleformat
• strftime

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

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 .

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/

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.

@ 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

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.

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);

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.

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
 * 
 ************************************/

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)

new Date().toLocaleDateString()

// "3/21/2018"

Più documentazione su developer.mozilla.org

Se stai usando l'interfaccia utente di jQuery nel tuo codice, c'è una funzione integrata chiamata formatDate(). Lo sto usando in questo modo per formattare la data di oggi:

var testdate = Date();
testdate = $.datepicker.formatDate( "d-M-yy",new Date(testdate));
alert(testdate);

Puoi vedere molti altri esempi di data di formattazione nella documentazione dell'interfaccia utente di jQuery .

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>

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

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));

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;
}

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

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}')

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

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

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>

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 .