So formatieren Sie ein JavaScript-Datum

Wie kann ich in JavaScript ein Datumsobjekt formatieren, als das gedruckt werden soll 10-Aug-2010?

Bei benutzerdefinierten Datumsformaten müssen Sie die Datums- (oder Zeit-) Komponenten aus einem DateTimeFormatObjekt (das Teil der ECMAScript Internationalization API ist ) ziehen und anschließend manuell eine Zeichenfolge mit den gewünschten Trennzeichen erstellen.

Dazu können Sie Folgendes verwenden 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

Sie können die Teile eines DateTimeFormatnacheinander auch mit herausziehen. DateTimeFormat#formatBeachten Sie jedoch, dass bei Verwendung dieser Methode ab März 2020 ein Fehler in der ECMAScript-Implementierung vorliegt, wenn es darum geht, Nullen in Minuten und Sekunden zu führen (dieser Fehler) wird durch den obigen Ansatz umgangen).

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

Wenn Sie mit Datums- und Uhrzeitangaben arbeiten , lohnt es sich normalerweise, eine Bibliothek (z. B. moment.js , luxon ) zu verwenden, da das Feld viele komplexe Komplexitäten aufweist.

Beachten Sie, dass die in den obigen Lösungen verwendete ECMAScript Internationalization API in IE10 nicht unterstützt wird ( 0,03% globaler Browser-Marktanteil im Februar 2020).

Wenn Sie etwas weniger Kontrolle über die Formatierung benötigen als die derzeit akzeptierte Antwort, Date#toLocaleDateStringkönnen Sie mit dieser Option standardmäßige länderspezifische Renderings erstellen. Die localeund optionsArgumente lassen Anwendungen , die die Sprache angeben , der Darstellungskonventionen verwendet werden soll, und eine gewisse Anpassung des Rendering ermöglichen.

Schlüsselbeispiele für Optionen:

1. Tag:
   Die Darstellung des Tages.
   Mögliche Werte sind "numerisch", "zweistellig".
2. Wochentag:
   Die Darstellung des Wochentags.
   Mögliche Werte sind "eng", "kurz", "lang".
3. Jahr:
   Die Darstellung des Jahres.
   Mögliche Werte sind "numerisch", "zweistellig".
4. Monat:
   Die Darstellung des Monats.
   Mögliche Werte sind "numerisch", "zweistellig", "schmal", "kurz", "lang".
5. Stunde:
   Die Darstellung der Stunde.
   Mögliche Werte sind "numerisch", "zweistellig".
6. Minute: Die Darstellung der Minute.
   Mögliche Werte sind "numerisch", "zweistellig".
7. Sekunde:
   Die Darstellung der Sekunde.
   Mögliche Werte sind "numerisch", zweistellig ".

Alle diese Schlüssel sind optional. Sie können die Anzahl der Optionswerte basierend auf Ihren Anforderungen ändern. Dies spiegelt auch das Vorhandensein der einzelnen Datums- und Zeitangaben wider.

Hinweis: Wenn Sie nur die Inhaltsoptionen konfigurieren möchten, aber dennoch das aktuelle Gebietsschema verwenden möchten, führt nulldie Übergabe des ersten Parameters zu einem Fehler. Verwenden Sie undefinedstattdessen.

Für verschiedene Sprachen:

1. "en-US": Für Englisch
2. "hi-IN": Für Hindi
3. "ja-JP": Für Japaner

Sie können weitere Sprachoptionen verwenden.

Zum Beispiel

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

Sie können die toLocaleString()Methode auch für denselben Zweck verwenden. Der einzige Unterschied besteht darin, dass diese Funktion die Zeit angibt, zu der Sie keine Optionen übergeben.

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

Verweise:

• toLocaleString()

• toLocaleDateString()

Verwenden Sie die date.format-Bibliothek :

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

kehrt zurück:

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

Datumsformat auf npm

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

Wenn Sie benötigen , um schnell Ihr Datumsformat Ebene JavaScript, Verwendung getDate, getMonth + 1, getFullYear, getHoursund getMinutes:

var d = new Date();

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

// 16-5-2015 9:50

Oder wenn es mit Nullen aufgefüllt werden muss:

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

Nun, ich wollte das heutige Datum in eine MySQL- freundliche Datumszeichenfolge wie den 23.06.2012 konvertieren und diese Zeichenfolge als Parameter in einer meiner Abfragen verwenden. Die einfache Lösung, die ich gefunden habe, ist folgende:

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

Beachten Sie, dass die obige Lösung Ihren Zeitzonenversatz nicht berücksichtigt.

Sie können stattdessen diese Funktion verwenden:

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

Dies gibt Ihnen das richtige Datum, falls Sie diesen Code am Anfang / Ende des Tages ausführen.

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

Benutzerdefinierte Formatierungsfunktion:

Bei festen Formaten erledigt eine einfache Funktion den Job. Das folgende Beispiel generiert das internationale Format JJJJ-MM-TT:

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

Das OP-Format kann wie folgt generiert werden:

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

Hinweis: Es ist jedoch normalerweise keine gute Idee, die JavaScript-Standardbibliotheken zu erweitern (z. B. durch Hinzufügen dieser Funktion zum Prototyp von Date).

Eine erweiterte Funktion könnte eine konfigurierbare Ausgabe basierend auf einem Formatparameter generieren.

Wenn das Schreiben einer Formatierungsfunktion zu lang ist, gibt es viele Bibliotheken, in denen dies möglich ist. Einige andere Antworten führen sie bereits auf. Zunehmende Abhängigkeiten haben aber auch ein Gegenstück.

Standardfunktionen zur ECMAScript-Formatierung:

Seit neueren Versionen von ECMAScript verfügt die DateKlasse über einige spezifische Formatierungsfunktionen:

toDateString : Implementierungsabhängig, nur das Datum anzeigen .

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 : Datum und Uhrzeit von ISO 8601 anzeigen .

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 für 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 : Implementierungsabhängig, ein Datum im Gebietsschemaformat.

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

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

toLocaleString : Implementierungsabhängig, Datum und Uhrzeit im Gebietsschemaformat.

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 : Implementierungsabhängig, eine Zeit im Gebietsschemaformat.

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 : Generischer toString für Datum.

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

Hinweis: Aus diesen Formatierungen kann eine benutzerdefinierte Ausgabe generiert werden>

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

Beispiele für Ausschnitte:

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

Wenn Sie in Ihrem Projekt bereits die jQuery-Benutzeroberfläche verwenden, können Sie dies folgendermaßen tun:

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

// formatted will be 'Jul 8, 2014'

Einige Datumsauswahl-Datumsformatoptionen zum Spielen sind hier verfügbar .

Ich denke, Sie können einfach die nicht standardmäßige Datumsmethode verwendentoLocaleFormat(formatString)

formatString: Eine Formatzeichenfolge im gleichen Format, die von der strftime()Funktion in C erwartet wird .

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

Verweise:

• Tolocaleformat
• strftime

Normales JavaScript ist die beste Wahl für kleine Onetimer.

Auf der anderen Seite ist MomentJS eine großartige Lösung , wenn Sie mehr Daten benötigen .

Zum Beispiel:

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

In modernen Browsern (*) können Sie dies einfach tun:

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

Ausgabe bei heutiger Ausführung (24. Januar 2016):

'24-Jan-2016'

(*) Laut MDN bedeutet "moderne Browser" die nächtliche Erstellung von Chrome 24+, Firefox 29+, Internet Explorer 11, Edge 12+, Opera 15+ und Safari .

Sie sollten sich date.js ansehen . Es werden viele praktische Helfer für die Arbeit mit Daten hinzugefügt, zum Beispiel in Ihrem Fall:

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

Erste Schritte: http://www.datejs.com/2007/11/27/getting-started-with-datejs/

Ich kann Ihr gewünschtes Format in einer Zeile ohne Bibliotheken und ohne Datumsmethoden erhalten, nur 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()')

In meinen Tests funktioniert dies zuverlässig in den wichtigsten Browsern (Chrome, Safari, Firefox und IE). Wie @RobG hervorhob, ist die Ausgabe von Date.prototype.toString () implementierungsabhängig. Testen Sie also einfach die Ausgabe, um sicherzugehen Es funktioniert direkt in Ihrer JavaScript-Engine. Sie können sogar Code hinzufügen, um die Zeichenfolgenausgabe zu testen und sicherzustellen, dass sie Ihren Erwartungen entspricht, bevor Sie den regulären Ausdruck ersetzen.

@ Sébastien - Alternative alle Browser-Unterstützung

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

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

OK , wir haben etwas namens Intl, das heutzutage sehr nützlich ist, um ein Datum in JavaScript zu formatieren:

Ihr Datum wie folgt:

var date = '10/8/2010';

Und Sie wechseln zu Datum, indem Sie neues Datum () wie folgt verwenden:

date = new Date(date);

Und jetzt können Sie es nach Belieben formatieren, indem Sie eine Liste von Gebietsschemas wie folgt verwenden:

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: "٨‏/١٠‏/٢٠١٠"

Wenn Sie genau das oben erwähnte Format möchten, können Sie Folgendes tun:

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

Und das Ergebnis wird sein:

"10-Aug-2010"

Weitere Informationen finden Sie in der Dokumentation zu Intl API und Intl.DateTimeFormat .

Verwenden einer Zeichenfolgenvorlage für ECMAScript Edition 6 (ES6 / ES2015):

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

Wenn Sie die Trennzeichen ändern müssen:

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

Verpackte Lösung: Luxon

Wenn Sie eine Lösung für alle verwenden möchten, empfehle ich dringend die Verwendung von Luxon (einer modernisierten Version von Moment.js ), das auch in vielen Gebietsschemas / Sprachen und vielen anderen Funktionen formatiert.

Luxon wird auf der Moment.js-Website gehostet und von einem Moment.js-Entwickler entwickelt, da Moment.js Einschränkungen aufweist, die der Entwickler ansprechen wollte, aber nicht konnte.

Installieren:

npm install luxonoder yarn add luxon(Link für andere Installationsmethoden besuchen)

Beispiel:

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

Ausbeuten:

10.08.2010

Manuelle Lösung

Mit ähnlichen Formatierungen wie Moment.js, Class DateTimeFormatter (Java) und Class SimpleDateFormat (Java) habe ich eine umfassende Lösung implementiert, formatDate(date, patternStr)bei der der Code leicht zu lesen und zu ändern ist. Sie können Datum, Uhrzeit, AM / PM usw. anzeigen. Weitere Beispiele finden Sie im Code.

Beispiel:

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

( formatDateist im folgenden Code-Snippet implementiert)

Ausbeuten:

Freitag, 12. Oktober 2018 18: 11: 23: 445

Probieren Sie den Code aus, indem Sie auf "Code-Snippet ausführen" klicken.

Datums- und Zeitmuster

yy= Zweistelliges Jahr; yyyy= volles Jahr

M= Ziffernmonat; MM= Zweistelliger Monat; MMM= kurzer Monatsname; MMMM= vollständiger Monatsname

EEEE= vollständiger Wochentagsname; EEE= kurzer Wochentagsname

d= Zifferntag; dd= 2-stelliger Tag

h= Stunden morgens / abends; hh= Zweistellige Stunden am / pm; H= Stunden; HH= Zweistellige Stunden

m= Minuten; mm= Zweistellige Minuten; aaa= AM / PM

s= Sekunden; ss= 2-stellige Sekunden

S = Millisekunden

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

Vielen Dank an @Gerry, dass Sie Luxon erwähnt haben.

Hier ist ein Code, den ich gerade geschrieben habe, um die Datumsformatierung für ein Projekt zu handhaben, an dem ich arbeite. Es ahmt die PHP-Datumsformatierungsfunktion nach, die meinen Anforderungen entspricht. Fühlen Sie sich frei, es zu verwenden, es erweitert nur das bereits vorhandene Date () -Objekt. Dies ist vielleicht nicht die eleganteste Lösung, aber sie funktioniert für meine Bedürfnisse.

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

Eine JavaScript-Lösung ohne Verwendung externer Bibliotheken:

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"

Weitere Dokumentation unter developer.mozilla.org

Wenn Sie die jQuery-Benutzeroberfläche in Ihrem Code verwenden, wird eine integrierte Funktion aufgerufen formatDate(). Ich benutze es so, um das heutige Datum zu formatieren:

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

In der Dokumentation zur jQuery-Benutzeroberfläche finden Sie viele weitere Beispiele für das Formatierungsdatum .

Wir haben viele Lösungen dafür, aber ich denke, die beste davon ist Moment.js. Ich persönlich schlage daher vor, Moment.js für Datums- und Zeitoperationen zu verwenden.

console.log(moment().format('DD-MMM-YYYY'));

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

Eine nützliche und flexible Möglichkeit zum Formatieren der DateTimes in JavaScript ist 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,'-'));

Ergebnis ist: "12-Oct-2017"

Die Datums- und Uhrzeitformate können mithilfe des Optionsarguments angepasst werden.

Das Intl.DateTimeFormatObjekt ist ein Konstruktor für Objekte, die eine sprachempfindliche Formatierung von Datum und Uhrzeit ermöglichen.

Syntax

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

Parameter

Gebietsschemas

Optional. Eine Zeichenfolge mit einem BCP 47-Sprach-Tag oder ein Array solcher Zeichenfolgen. Die allgemeine Form und Interpretation des Gebietsschemas finden Sie auf der Seite Intl. Die folgenden Unicode-Erweiterungsschlüssel sind zulässig:

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

Optionen

Optional. Ein Objekt mit einigen oder allen der folgenden Eigenschaften:

localeMatcher

Der zu verwendende Gebietsschema-Matching-Algorithmus. Mögliche Werte sind "lookup"und "best fit"; Der Standardwert ist "best fit". Informationen zu dieser Option finden Sie auf der Seite Intl.

Zeitzone

Die zu verwendende Zeitzone. Der einzige Wert, den Implementierungen erkennen müssen, ist "UTC": Der Standardwert ist die Standardzeitzone der Laufzeit. Implementierungen können auch die Zeitzonennamen der IANA Zeitzonendatenbank erkennen, wie "Asia/Shanghai", "Asia/Kolkata", "America/New_York".

Stunde12

Gibt an, ob eine 12-Stunden-Zeit verwendet werden soll (im Gegensatz zu einer 24-Stunden-Zeit). Mögliche Werte sind trueund false; Die Standardeinstellung ist vom Gebietsschema abhängig.

formatMatcher

Der zu verwendende Formatanpassungsalgorithmus. Mögliche Werte sind "basic"und "best fit"; Der Standardwert ist "best fit". Informationen zur Verwendung dieser Eigenschaft finden Sie in den folgenden Abschnitten.

Die folgenden Eigenschaften beschreiben die Datums- / Uhrzeitkomponenten, die in der formatierten Ausgabe verwendet werden sollen, und ihre gewünschten Darstellungen. Implementierungen sind erforderlich, um mindestens die folgenden Teilmengen zu unterstützen:

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

Implementierungen unterstützen möglicherweise andere Teilmengen, und Anforderungen werden gegen alle verfügbaren Teilmengen-Repräsentationskombinationen ausgehandelt, um die beste Übereinstimmung zu finden. Für diese Aushandlung stehen zwei Algorithmen zur Verfügung, die von der formatMatcher-Eigenschaft ausgewählt werden: Ein vollständig spezifizierter "basic"Algorithmus und ein implementierungsabhängiger "Best-Fit" -Algorithmus.

Wochentag

Die Darstellung des Wochentags. Mögliche Werte sind "narrow", "short", "long".

Epoche

Die Darstellung der Ära. Mögliche Werte sind "narrow", "short", "long".

Jahr

Die Darstellung des Jahres. Mögliche Werte sind "numeric", "2-digit".

Monat

Die Darstellung des Monats. Mögliche Werte sind "numeric", "2-digit", "narrow", "short", "long".

Tag

Die Darstellung des Tages. Mögliche Werte sind "numeric", "2-digit".

Stunde

Die Darstellung der Stunde. Mögliche Werte sind "numeric", "2-digit".

Minute

Die Darstellung der Minute. Mögliche Werte sind "numeric", "2-digit".

zweite

Die Darstellung des zweiten. Mögliche Werte sind "numeric", "2-digit".

timeZoneName

Die Darstellung des Zeitzonennamens. Mögliche Werte sind "short", "long". Der Standardwert für jede Datums- / Uhrzeit-Komponenteneigenschaft ist undefiniert. Wenn jedoch alle Komponenteneigenschaften undefiniert sind, werden Jahr, Monat und Tag angenommen "numeric".

Online prüfen

Mehr Details

Dies kann bei dem Problem helfen:

var d = new Date();

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

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

So habe ich meine npm-Plugins implementiert

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 verfügt über hervorragende Erweiterungen des Date-Objekts, einschließlich einer Date.format- Methode.

Beispiele aus der Dokumentation:

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

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

Für alle, die nach einer wirklich einfachen ES6-Lösung zum Kopieren, Einfügen und Übernehmen suchen:

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

Ab 2019 können Sie toLocaleDateString so einstellen, dass nur bestimmte Teile zurückgegeben werden. Anschließend können Sie sie nach Belieben verbinden:

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

Sie sollten sich DayJs ansehen. Es ist ein Remake von Momenten, aber die modulare Architektur ist so leicht ausgerichtet.

Schnelle 2-KB-Alternative zu Moment.js mit derselben modernen API

Day.js ist eine minimalistische JavaScript-Bibliothek, die Datums- und Uhrzeitangaben für moderne Browser mit einer weitgehend Moment.js-kompatiblen API analysiert, validiert, bearbeitet und anzeigt. Wenn Sie Moment.js verwenden, wissen Sie bereits, wie Sie Day.js verwenden.

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>

Um "10-Aug-2010" zu erhalten, versuchen Sie:

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

Informationen zur Browserunterstützung finden Sie unter toLocaleDateString .