Jak sformatować datę JavaScript

Jak w JavaScript mogę sformatować obiekt daty do wydrukowania 10-Aug-2010?

W przypadku niestandardowych formatów dat należy wyciągnąć komponenty daty (lub godziny) z DateTimeFormatobiektu (który jest częścią interfejsu API internacjonalizacji ECMAScript ), a następnie ręcznie utworzyć ciąg z żądanymi ogranicznikami.

Aby to zrobić, możesz użyć 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

Możesz także wyciągać poszczególne części DateTimeFormatza pomocą DateTimeFormat#format, ale pamiętaj, że podczas korzystania z tej metody, począwszy od marca 2020 r., W implementacji ECMAScript występuje błąd, jeśli chodzi o wiodące zera w minutach i sekundach (ten błąd jest obchodzone przez powyższe podejście).

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

Podczas pracy z datami i godzinami zwykle warto korzystać z biblioteki (np. Moment.js , luxon ) ze względu na wiele ukrytych zawiłości pola.

Należy pamiętać, że interfejs API internacjonalizacji ECMAScript zastosowany w powyższych rozwiązaniach nie jest obsługiwany w IE10 ( 0,03% udziału w globalnym rynku przeglądarek w lutym 2020 r.).

Jeśli potrzebujesz nieco mniejszej kontroli nad formatowaniem niż obecnie akceptowana odpowiedź, Date#toLocaleDateStringmożesz użyć jej do stworzenia standardowych renderingów specyficznych dla ustawień regionalnych. localeI optionsargumenty niech aplikacje określić język, którego formatowanie konwencje powinny być stosowane i umożliwiają pewne dostosowanie renderowania.

Kluczowe przykłady opcji:

1. dzień:
   przedstawienie dnia.
   Możliwe wartości to „numeryczne”, „2-cyfrowe”.
2. dzień tygodnia:
   reprezentacja dnia tygodnia.
   Możliwe wartości to „wąski”, „krótki”, „długi”.
3. rok:
   reprezentacja roku.
   Możliwe wartości to „numeryczne”, „2-cyfrowe”.
4. miesiąc:
   reprezentacja miesiąca.
   Możliwe wartości to „numeryczne”, „2-cyfrowe”, „wąskie”, „krótkie”, „długie”.
5. godzina:
   reprezentacja godziny.
   Możliwe wartości to „numeryczne”, „2-cyfrowe”.
6. minuta: reprezentacja minuty.
   Możliwe wartości to „numeryczne”, „2-cyfrowe”.
7. drugi:
   reprezentacja drugiego.
   Możliwe wartości to „numeryczne”, 2-cyfrowe ”.

Wszystkie te klucze są opcjonalne. Możesz zmienić liczbę wartości opcji w zależności od swoich wymagań, a to również odzwierciedli obecność każdego terminu.

Uwaga: jeśli chcesz tylko skonfigurować opcje treści, ale nadal używasz bieżących ustawień regionalnych, podanie nullpierwszego parametru spowoduje błąd. Użyj undefinedzamiast tego.

Dla różnych języków:

1. „en-US”: w języku angielskim
2. „hi-IN”: w języku hindi
3. „ja-JP”: w języku japońskim

Możesz użyć więcej opcji językowych.

Na przykład

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

Możesz także użyć tej toLocaleString()metody do tego samego celu. Jedyną różnicą jest to, że ta funkcja zapewnia czas, w którym nie można przekazać żadnych opcji.

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

Bibliografia:

• toLocaleString()

• toLocaleDateString()

Użyj biblioteki date.format :

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

zwroty:

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

dateformat na npm

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

Jeśli trzeba szybko formatować datę przy użyciu zwykłego JavaScript, wykorzystywania getDate, getMonth + 1, getFullYear, getHoursi getMinutes:

var d = new Date();

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

// 16-5-2015 9:50

Lub, jeśli potrzebujesz go uzupełnić zerami:

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

Cóż, chciałem przekonwertować dzisiejszą datę na przyjazny ciąg daty MySQL, taki jak 23.06.2012, i użyć tego ciągu jako parametru w jednym z moich zapytań. Znalazłem proste rozwiązanie:

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

Należy pamiętać, że powyższe rozwiązanie ma nie uwzględniać strefa czasowa offsetowego.

Zamiast tego możesz rozważyć użycie tej funkcji:

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

To da ci prawidłową datę na wypadek, gdybyś wykonywał ten kod około początku / końca dnia.

• Przykład: http://jsfiddle.net/simo/sapuhzmm/
• Date.toISOString
• Data.JSON
• String.slice

Niestandardowa funkcja formatowania:

W przypadku formatów ustalonych wystarczy prosta funkcja. Poniższy przykład generuje międzynarodowy format RRRR-MM-DD:

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

Format OP można wygenerować w następujący sposób:

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

Uwaga: Jednak zwykle nie jest dobrym pomysłem rozszerzenie standardowych bibliotek JavaScript (np. Poprzez dodanie tej funkcji do prototypu Date).

Bardziej zaawansowana funkcja może generować konfigurowalne dane wyjściowe na podstawie parametru formatu.

Jeśli napisanie funkcji formatowania jest zbyt długie, istnieje wiele bibliotek wokół niej. Niektóre inne odpowiedzi już je wymieniają. Ale rosnące zależności mają również swoje odpowiedniki.

Standardowe funkcje formatowania ECMAScript:

Od nowszych wersji ECMAScript Dateklasa ma pewne specyficzne funkcje formatowania:

toDateString : zależne od implementacji, pokaż tylko datę.

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 : Pokaż datę i godzinę 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 dla 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 : zależna od implementacji, data w formacie ustawień regionalnych.

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

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

toLocaleString : zależna od implementacji, data i godzina w formacie ustawień regionalnych.

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 : zależny od implementacji, czas w formacie ustawień regionalnych.

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 : Ogólny toString dla daty.

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

Uwaga: możliwe jest wygenerowanie niestandardowego wyjścia z tych formatowań>

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

Przykłady fragmentów:

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

Jeśli już używasz jQuery UI w swoim projekcie, możesz to zrobić w ten sposób:

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

// formatted will be 'Jul 8, 2014'

Niektóre opcje formatu daty doboru daty do zabawy są dostępne tutaj .

Myślę, że możesz po prostu użyć niestandardowej metody DatetoLocaleFormat(formatString)

formatString: ciąg formatu w tym samym formacie, jakiego oczekuje strftime()funkcja w C.

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

Bibliografia:

• tolocaleformat
• strftime

Zwykły JavaScript jest najlepszym wyborem dla małych onetimerów.

Z drugiej strony, jeśli potrzebujesz więcej randek , MomentJS to świetne rozwiązanie.

Na przykład:

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

W nowoczesnych przeglądarkach (*) możesz po prostu to zrobić:

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

Dane wyjściowe, jeżeli zostaną wykonane dzisiaj (24 stycznia 2016 r.):

'24-Jan-2016'

(*) Według MDN "Nowoczesne przeglądarki" oznacza Chrome 24+, 29+ Firefox, Internet Explorer 11, EDGE 12+, 15+ i Opera Safari nightly build .

Trzeba spojrzeć na date.js . Dodaje wiele wygodnych pomocników do pracy z datami, na przykład w twoim przypadku:

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

Pierwsze kroki: http://www.datejs.com/2007/11/27/getting-started-with-datejs/

Mogę uzyskać żądany format w jednym wierszu bez użycia bibliotek i metod Date, po prostu 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()')

W moich testach działa to niezawodnie w głównych przeglądarkach (Chrome, Safari, Firefox i IE). Jak wskazał @RobG, dane wyjściowe Date.prototype.toString () zależą od implementacji, więc po prostu przetestuj dane wyjściowe, aby się upewnić działa bezpośrednio w silniku JavaScript. Możesz nawet dodać kod, aby przetestować dane wyjściowe ciągu i upewnić się, że pasują one do oczekiwań przed wykonaniem zamiany wyrażenia regularnego.

@ Sébastien - alternatywnie obsługa wszystkich przeglądarek

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

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

OK , mamy coś o nazwie Intl, które jest bardzo przydatne do formatowania daty w JavaScript w dzisiejszych czasach:

Twoja data jak poniżej:

var date = '10/8/2010';

I zmieniasz na Date, używając nowej Date () jak poniżej:

date = new Date(date);

A teraz możesz sformatować go w dowolny sposób, korzystając z listy ustawień regionalnych, takich jak poniżej:

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

Jeśli chcesz dokładnie wspomniany powyżej format, możesz:

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

Rezultatem będzie:

"10-Aug-2010"

Aby uzyskać więcej informacji, zobacz Intl API i dokumentację Intl.DateTimeFormat .

Za pomocą szablonu ciągu ECMAScript Edition 6 (ES6 / ES2015):

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

Jeśli musisz zmienić ograniczniki:

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

Pakowane rozwiązanie: Luxon

Jeśli chcesz zastosować jedno rozwiązanie, które pasuje do wszystkich, bardzo polecam użycie Luxon (zmodernizowanej wersji Moment.js ), która również formatuje w wielu lokalizacjach / językach i tonach innych funkcji.

Luxon jest hostowany na stronie Moment.js i opracowany przez programistę Moment.js, ponieważ Moment.js ma ograniczenia, które deweloper chciał rozwiązać, ale nie mógł.

Żeby zainstalować:

npm install luxonlub yarn add luxon(odwiedź link, aby uzyskać inne metody instalacji)

Przykład:

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

Wydajność:

10-sie-2010

Rozwiązanie ręczne

Używając podobnego formatowania jak Moment.js, Class DateTimeFormatter (Java) i Class SimpleDateFormat (Java) , wdrożyłem kompleksowe rozwiązanie, w formatDate(date, patternStr)którym kod jest łatwy do odczytania i modyfikacji. Możesz wyświetlić datę, godzinę, AM / PM itp. Zobacz kod, aby uzyskać więcej przykładów.

Przykład:

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

( formatDatejest zaimplementowany w poniższym fragmencie kodu)

Wydajność:

Piątek, 12 października 2018 r. 18: 11: 23: 445

Wypróbuj kod, klikając „Uruchom fragment kodu”.

Wzory daty i godziny

yy= 2-cyfrowy rok; yyyy= pełny rok

M= cyfra miesiąca; MM= 2-cyfrowy miesiąc; MMM= nazwa krótkiego miesiąca; MMMM= pełna nazwa miesiąca

EEEE= pełna nazwa dnia tygodnia; EEE= krótka nazwa dnia tygodnia

d= cyfrowy dzień; dd= 2-cyfrowy dzień

h= godziny przed południem / po południu; hh= 2-cyfrowe godziny am / pm; H= godziny; HH= 2-cyfrowe godziny

m= minuty; mm= 2-cyfrowe minuty; aaa= AM / PM

s= sekundy; ss= 2-cyfrowe sekundy

S = milisekundy

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

Dziękuję @Gerry za wychowanie Luxona.

Oto kod, który właśnie napisałem, aby obsłużyć formatowanie daty dla projektu, nad którym pracuję. Naśladuje funkcję formatowania daty PHP, która odpowiada moim potrzebom. Możesz go używać, po prostu rozszerza on już istniejący obiekt Date (). To może nie jest najbardziej eleganckie rozwiązanie, ale działa na moje potrzeby.

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

Rozwiązanie JavaScript bez użycia zewnętrznych bibliotek:

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"

Więcej dokumentacji na developer.mozilla.org

Jeśli używasz interfejsu jQuery w swoim kodzie, istnieje wbudowana funkcja o nazwie formatDate(). Używam go w ten sposób, aby sformatować dzisiejszą datę:

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

Możesz zobaczyć wiele innych przykładów formatowania daty w dokumentacji interfejsu użytkownika jQuery .

Mamy na to wiele rozwiązań, ale myślę, że najlepsze z nich to Moment.js. Dlatego osobiście sugeruję użycie Moment.js do operacji daty i godziny.

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

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

Przydatnym i elastycznym sposobem formatowania DateTimes w JavaScript jest 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,'-'));

Wynik to: "12-Oct-2017"

Formaty daty i godziny można dostosować za pomocą argumentu opcji.

Intl.DateTimeFormatObiekt jest konstruktor dla obiektów, które umożliwiają języka wrażliwego formatowanie daty i czasu.

Składnia

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

Parametry

lokalizacje

Opcjonalny. Ciąg ze znacznikiem języka BCP 47 lub tablica takich ciągów. Ogólną formę i interpretację argumentu locales można znaleźć na stronie Intl. Dozwolone są następujące klucze rozszerzenia 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".

Opcje

Opcjonalny. Obiekt posiadający niektóre lub wszystkie z następujących właściwości:

localeMatcher

Algorytm dopasowywania ustawień regionalnych do użycia. Możliwe wartości to "lookup"i "best fit"; domyślnie jest to "best fit". Aby uzyskać informacje o tej opcji, zobacz stronę Intl.

strefa czasowa

Strefa czasowa do użycia. Jedyne implementacje wartości, które muszą rozpoznać, to "UTC"; wartością domyślną jest domyślna strefa czasowa środowiska wykonawczego. Implementacje mogą także rozpoznawać nazwy strefy czasowej bazy danych stref czasowych IANA, takie jak "Asia/Shanghai", "Asia/Kolkata", "America/New_York".

godzina 12

Określa, czy użyć 12-godzinnego czasu (w przeciwieństwie do 24-godzinnego). Możliwe wartości to truei false; wartość domyślna zależy od ustawień regionalnych.

formatMatcher

Używany algorytm dopasowywania formatu. Możliwe wartości to "basic"i "best fit"; domyślnie jest to "best fit". Informacje o korzystaniu z tej właściwości znajdują się w poniższych akapitach.

Poniższe właściwości opisują składniki daty i godziny, które mają być użyte w sformatowanym wyjściu, oraz ich pożądane reprezentacje. Implementacje są wymagane do obsługi co najmniej następujących podzbiorów:

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

Implementacje mogą obsługiwać inne podzbiory, a żądania będą negocjowane ze wszystkimi dostępnymi kombinacjami podzbiorów w celu znalezienia najlepszego dopasowania. Do tej negocjacji dostępne są dwa algorytmy wybrane przez właściwość formatMatcher: W pełni określony "basic"algorytm i zależny od implementacji algorytm „najlepszego dopasowania”.

dzień powszedni

Przedstawienie dnia tygodnia. Możliwe są następujące wartości "narrow", "short", "long".

era

Reprezentacja epoki. Możliwe są następujące wartości "narrow", "short", "long".

rok

Przedstawienie roku. Możliwe są następujące wartości "numeric", "2-digit".

miesiąc

Reprezentacja miesiąca. Możliwe są następujące wartości "numeric", "2-digit", "narrow", "short", "long".

dzień

Reprezentacja dnia. Możliwe są następujące wartości "numeric", "2-digit".

godzina

Reprezentacja godziny. Możliwe są następujące wartości "numeric", "2-digit".

minuta

Reprezentacja minuty. Możliwe są następujące wartości "numeric", "2-digit".

druga

Reprezentacja drugiego. Możliwe są następujące wartości "numeric", "2-digit".

timeZoneName

Reprezentacja nazwy strefy czasowej. Możliwe są następujące wartości "short", "long". Wartość domyślna dla każdej właściwości komponentu data-czas jest niezdefiniowana, ale jeśli wszystkie właściwości komponentu są niezdefiniowane, zakłada się, że rok, miesiąc i dzień są "numeric".

Sprawdź online

Więcej szczegółów

Może to pomóc w rozwiązaniu problemu:

var d = new Date();

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

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

Tak zaimplementowałem moje wtyczki 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 ma doskonałe rozszerzenia do obiektu Date, w tym metodę Date.format .

Przykłady z dokumentacji:

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

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

Dla każdego, kto szuka naprawdę prostego rozwiązania ES6 do kopiowania, wklejania i przyjmowania:

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

Od 2019 r. Wygląda na to, że możesz dostać się doLocaleDateString, aby zwrócić tylko niektóre części, a następnie możesz dołączyć do nich, jak chcesz:

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

Powinieneś rzucić okiem na DayJs To remake momentów, ale modułowa architektura zorientowana na tak lżejszą.

Szybka 2kB alternatywa dla Moment.js z tym samym nowoczesnym API

Day.js to minimalistyczna biblioteka JavaScript, która analizuje, weryfikuje, manipuluje oraz wyświetla daty i godziny dla nowoczesnych przeglądarek z API w dużej mierze kompatybilnym z Moment.js. Jeśli korzystasz z Moment.js, wiesz już, jak korzystać z 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>

Aby uzyskać „10 sierpnia 2010”, spróbuj:

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

Aby uzyskać informacje na temat obsługi przeglądarki, zobacz toLocaleDateString .