Como formatar uma data JavaScript

Em JavaScript, como posso formatar um objeto de data para imprimir como 10-Aug-2010?

Para formatos de data delimitados personalizados, é necessário retirar os componentes de data (ou hora) de um DateTimeFormat objeto (que faz parte da API de Internacionalização do ECMAScript ) e, em seguida, criar manualmente uma string com os delimitadores que você deseja.

Para fazer isso, você pode usar 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

Você também pode retirar as partes de um DateTimeFormatpor um usando DateTimeFormat#format, mas observe que ao usar esse método, em março de 2020, há um erro na implementação do ECMAScript quando se trata de zeros à esquerda em minutos e segundos (esse bug é contornado pela abordagem acima).

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

Ao trabalhar com datas e horas, geralmente vale a pena usar uma biblioteca (por exemplo: moment.js , luxon ) por causa das muitas complexidades ocultas do campo.

Observe que a API de internacionalização do ECMAScript, usada nas soluções acima, não é suportada no IE10 ( participação de mercado global de navegador de 0,03% em fevereiro de 2020).

Se você precisar de um pouco menos de controle sobre a formatação do que a resposta atualmente aceita, Date#toLocaleDateStringpoderá ser usada para criar renderizações específicas de localidade padrão. Os argumentos localee optionspermitem que os aplicativos especifiquem o idioma cujas convenções de formatação devem ser usadas e permitem alguma personalização da renderização.

Exemplos principais de opções:

1. dia:
   a representação do dia.
   Os valores possíveis são "numérico", "2 dígitos".
2. dia da semana:
   a representação do dia da semana.
   Os valores possíveis são "estreito", "curto", "longo".
3. ano:
   a representação do ano.
   Os valores possíveis são "numérico", "2 dígitos".
4. month:
   a representação do mês.
   Os valores possíveis são "numérico", "2 dígitos", "estreito", "curto", "longo".
5. hora:
   a representação da hora.
   Os valores possíveis são "numérico", "2 dígitos".
6. minute: a representação do minuto.
   Os valores possíveis são "numérico", "2 dígitos".
7. segundo:
   a representação do segundo.
   Os valores possíveis são "numérico", 2 dígitos ".

Todas essas chaves são opcionais. Você pode alterar o número de valores de opções com base em seus requisitos, e isso também refletirá a presença de cada período de data e hora.

Nota: Se você deseja apenas configurar as opções de conteúdo, mas ainda usar o código do idioma atual, a passagem nullpara o primeiro parâmetro causará um erro. Use em undefinedvez disso.

Para diferentes idiomas:

1. "en-US": para inglês
2. "hi-IN": para hindi
3. "ja-JP": para japonês

Você pode usar mais opções de idioma.

Por exemplo

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

Você também pode usar o toLocaleString()método para a mesma finalidade. A única diferença é que essa função fornece o horário em que você não passa nenhuma opção.

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

Referências:

• toLocaleString()

• toLocaleDateString()

Use a biblioteca date.format :

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

retorna:

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

dateformat on npm

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

Se você precisar formatar rapidamente sua data usando plain JavaScript, utilização 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

Ou, se você precisar que seja preenchido com zeros:

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

Bem, o que eu queria era converter a data de hoje em uma string de data amigável do MySQL como 23/06/2012, e usar essa string como parâmetro em uma das minhas consultas. A solução simples que encontrei é esta:

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

Lembre-se de que a solução acima não leva em consideração o deslocamento do fuso horário.

Você pode considerar usar esta função:

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

Isso fornecerá a data correta, caso você esteja executando esse código no início / fim do dia.

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

Função de formatação personalizada:

Para formatos fixos, uma função simples faz o trabalho. O exemplo a seguir gera o formato internacional AAAA-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

O formato OP pode ser gerado como:

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: No entanto, geralmente não é uma boa ideia estender as bibliotecas padrão do JavaScript (por exemplo, adicionando esta função ao protótipo de Data).

Uma função mais avançada pode gerar uma saída configurável com base em um parâmetro de formato.

Se a gravação de uma função de formatação for muito longa, há muitas bibliotecas em torno delas. Algumas outras respostas já as enumeram. Mas o aumento de dependências também tem sua contrapartida.

Funções de formatação padrão do ECMAScript:

Desde versões mais recentes do ECMAScript, a Dateclasse possui algumas funções de formatação específicas:

toDateString : depende da implementação, mostra apenas a 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 a data e hora da 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 para 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 : dependente da implementação, uma data no formato de localidade.

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

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

: depende da implementação, uma data e hora no formato de localidade.

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 : Dependente da implementação, uma hora no formato de localidade.

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

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

: genérico para 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: é possível gerar uma saída personalizada com a formatação>

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

Exemplos de trechos:

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 você já estiver usando a interface do usuário do jQuery em seu projeto, poderá fazê-lo desta maneira:

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

// formatted will be 'Jul 8, 2014'

Algumas opções de formato de data para escolher estão disponíveis aqui .

Eu acho que você pode simplesmente usar o método Date não padrãotoLocaleFormat(formatString)

formatString: uma string de formato no mesmo formato esperado pela strftime()função em C.

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

Referências:

• tolocaleformat
• strftime

JavaScript simples é a melhor opção para iniciantes pequenos.

Por outro lado, se você precisar de mais informações sobre datas, MomentJS é uma ótima solução.

Por exemplo:

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

Nos navegadores modernos (*) , você pode fazer isso:

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

Saída se executada hoje (24 de janeiro de 2016):

'24-Jan-2016'

(*) De acordo com a MDN , "navegadores modernos" significa a construção noturna do Chrome 24+, Firefox 29+, Internet Explorer 11, Edge 12+, Opera 15+ e Safari todas as noites .

Você deve ter um olhar para date.js . Ele adiciona muitos auxiliares convenientes para trabalhar com datas, por exemplo, no seu caso:

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

Introdução: http://www.datejs.com/2007/11/27/getting-started-with-datejs/

Posso obter o formato solicitado em uma linha usando nenhuma biblioteca e nenhum método Date, apenas 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()')

Nos meus testes, isso funciona de maneira confiável nos principais navegadores (Chrome, Safari, Firefox e IE.) Como o @RobG apontou, a saída de Date.prototype.toString () depende da implementação, portanto, apenas teste a saída para ter certeza funciona bem no seu mecanismo JavaScript. Você pode até adicionar algum código para testar a saída da string e garantir que ela corresponda ao que você espera antes de substituir o regex.

@ Sébastien - suporte alternativo ao navegador

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

Documentação: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

OK , temos algo chamado Intl, que é muito útil para formatar uma data em JavaScript atualmente:

Sua data como abaixo:

var date = '10/8/2010';

E você muda para Date usando o novo Date () como abaixo:

date = new Date(date);

E agora você pode formatá-lo da maneira que desejar, usando uma lista de locais como abaixo:

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 você deseja exatamente o formato mencionado acima, pode:

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 o resultado será:

"10-Aug-2010"

Para obter mais informações, consulte a documentação da API Intl e Intl.DateTimeFormat .

Usando um modelo de sequência do ECMAScript Edition 6 (ES6 / ES2015):

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

Se você precisar alterar os delimitadores:

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

Solução em pacote : Luxon

Se você deseja usar uma solução única para atender a todos, recomendo o uso do Luxon (uma versão modernizada do Moment.js ), que também formata muitos idiomas / idiomas e vários outros recursos.

Luxon está hospedado no site Moment.js e desenvolvido por um desenvolvedor do Moment.js porque o Moment.js tem limitações que o desenvolvedor queria abordar, mas não conseguiu.

Para instalar:

npm install luxonou yarn add luxon(visite o link para outros métodos de instalação)

Exemplo:

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

Rendimentos:

10 de agosto de 2010

Solução Manual

Usando formatação semelhante a Moment.js, Classe DateTimeFormatter (Java) e Classe SimpleDateFormat (Java) , implementei uma solução abrangente em formatDate(date, patternStr)que o código é fácil de ler e modificar. Você pode exibir data, hora, AM / PM, etc. Veja o código para mais exemplos.

Exemplo:

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

( formatDateé implementado no snippet de código abaixo)

Rendimentos:

Sexta-feira, 12 de outubro de 2018 18: 11: 23: 445

Experimente o código clicando em "Executar trecho de código".

Padrões de Data e Hora

yy= Ano de 2 dígitos; yyyy= ano completo

M= dígito mês; MM= Mês de 2 dígitos; MMM= nome curto do mês; MMMM= nome completo do mês

EEEE= nome completo do dia da semana; EEE= nome curto do dia da semana

d= dia do dígito; dd= Dia de 2 dígitos

h= horas am / pm; hh= Horas de 2 dígitos am / pm; H= horas; HH= Horas de 2 dígitos

m= minutos; mm= Minutos de 2 dígitos; aaa= AM / PM

s= segundos; ss= Segundos de 2 dígitos

S = milissegundos

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

Obrigado @Gerry por trazer Luxon.

Aqui está um código que acabei de escrever para lidar com a formatação de data de um projeto no qual estou trabalhando. Ele imita a funcionalidade de formatação de data PHP para atender às minhas necessidades. Sinta-se livre para usá-lo, está apenas estendendo o objeto Date () já existente. Esta pode não ser a solução mais elegante, mas está funcionando para minhas necessidades.

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

Uma solução JavaScript sem usar nenhuma biblioteca externa:

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"

Mais documentação em developer.mozilla.org

Se você estiver usando a interface do usuário do jQuery no seu código, há uma função incorporada chamada formatDate(). Estou usando dessa maneira para formatar a data de hoje:

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

Você pode ver muitos outros exemplos de data de formatação na documentação da interface do usuário do jQuery .

Temos muitas soluções para isso, mas acho que a melhor delas é o Moment.js. Então, eu pessoalmente sugiro usar o Moment.js para operações de data e hora.

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

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

Uma maneira útil e flexível para formatar o DateTimes em 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,'-'));

O resultado é: "12-Oct-2017"

Os formatos de data e hora podem ser personalizados usando o argumento de opções.

O Intl.DateTimeFormatobjeto é um construtor para objetos que habilitam a formatação de data e hora sensíveis ao idioma.

Sintaxe

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

Parâmetros

localidades

Opcional. Uma sequência com uma tag de idioma BCP 47 ou uma matriz dessas seqüências. Para a forma geral e interpretação do argumento de localidades, consulte a página Intl. As seguintes chaves de extensão Unicode são permitidas:

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

Opções

Opcional. Um objeto com algumas ou todas as seguintes propriedades:

localeMatcher

O algoritmo de correspondência de localidade a ser usado. Os valores possíveis são "lookup"e "best fit"; o padrão é "best fit". Para informações sobre esta opção, consulte a página Intl.

fuso horário

O fuso horário a ser usado. As únicas implementações de valor que você deve reconhecer é "UTC"; o padrão é o fuso horário padrão do tempo de execução. Implementações podem também reconhecer os nomes de zona de tempo do banco de dados de fuso horário IANA, tais como "Asia/Shanghai", "Asia/Kolkata","America/New_York" .

hour12

Se deve ser usado o tempo de 12 horas (em oposição ao tempo de 24 horas). Os valores possíveis são truee false; o padrão é dependente da localidade.

formatMatcher

O algoritmo de correspondência de formato a ser usado. Os valores possíveis são "basic"e "best fit"; o padrão é "best fit". Consulte os parágrafos a seguir para obter informações sobre o uso dessa propriedade.

As propriedades a seguir descrevem os componentes de data e hora a serem usados ​​na saída formatada e suas representações desejadas. As implementações são necessárias para suportar pelo menos os seguintes subconjuntos:

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

As implementações podem oferecer suporte a outros subconjuntos e as solicitações serão negociadas em relação a todas as combinações disponíveis de representação de subconjunto para encontrar a melhor correspondência. Dois algoritmos estão disponíveis para essa negociação e selecionados pela propriedade formatMatcher: Um "basic"algoritmo totalmente especificado e um algoritmo de "melhor ajuste" dependente da implementação.

dia da semana

A representação do dia da semana. Os valores possíveis são "narrow", "short", "long".

era

A representação da época. Os valores possíveis são "narrow", "short", "long".

ano

A representação do ano. Os valores possíveis são "numeric", "2-digit".

mês

A representação do mês. Os valores possíveis são "numeric", "2-digit", "narrow", "short", "long".

dia

A representação do dia. Os valores possíveis são "numeric", "2-digit".

hora

A representação da hora. Os valores possíveis são "numeric", "2-digit".

minuto

A representação do minuto. Os valores possíveis são "numeric", "2-digit".

segundo

A representação do segundo. Os valores possíveis são "numeric", "2-digit".

timeZoneName

A representação do nome do fuso horário. Os valores possíveis são "short", "long". O valor padrão para cada propriedade do componente de data e hora é indefinido, mas se todas as propriedades do componente forem indefinidas, o ano, o mês e o dia serão assumidos "numeric".

Verifique on-line

Mais detalhes

Isso pode ajudar com o problema:

var d = new Date();

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

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

É assim que eu implementei para meus plugins 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 possui excelentes extensões para o objeto Date, incluindo um método Date.format .

Exemplos da documentação:

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

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

Para quem procura uma solução ES6 realmente simples para copiar, colar e adotar:

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 partir de 2019, parece que você pode obter toLocaleDateString para retornar apenas determinadas partes e, em seguida, você pode juntá-las como desejar:

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

Você deve dar uma olhada no DayJs. É um remake de momentos, mas a arquitetura modular é mais leve.

Alternativa rápida de 2kB ao Moment.js com a mesma API moderna

O Day.js é uma biblioteca JavaScript minimalista que analisa, valida, manipula e exibe datas e horas para navegadores modernos com uma API amplamente compatível com Moment.js. Se você usa o Moment.js, já sabe como usar o 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>

Para obter "10 de agosto de 2010", tente:

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

Para suporte ao navegador, consulte toLocaleDateString .