Cómo formatear una fecha de JavaScript

En JavaScript, ¿cómo puedo formatear un objeto de fecha para imprimir 10-Aug-2010?

Para formatos de fecha delimitados a medida, debe extraer los componentes de fecha (u hora) de un DateTimeFormatobjeto (que forma parte de la API de internacionalización ECMAScript ) y luego crear manualmente una cadena con los delimitadores que desee.

Para hacer esto, puede 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

También puede extraer las partes de una DateTimeFormatpor una usando DateTimeFormat#format, pero tenga en cuenta que al usar este método, a partir de marzo de 2020, hay un error en la implementación de ECMAScript cuando se trata de ceros iniciales en minutos y segundos (este error es eludido por el enfoque anterior).

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

Cuando se trabaja con fechas y horas, es por lo general vale la pena utilizar una biblioteca (por ejemplo. Moment.js , luxon ) debido a las muchas complejidades ocultas del campo.

Tenga en cuenta que la API de internacionalización ECMAScript, utilizada en las soluciones anteriores, no es compatible con IE10 ( cuota de mercado global de navegador del 0.03% en febrero de 2020).

Si necesita un poco menos de control sobre el formato que la respuesta actualmente aceptada, Date#toLocaleDateStringpuede usarse para crear representaciones estándar específicas de la localidad. Los argumentos localey optionspermiten que las aplicaciones especifiquen el idioma cuyas convenciones de formato deben usarse, y permiten cierta personalización de la representación.

Ejemplos clave de opciones:

1. día:
   la representación del día.
   Los valores posibles son "numérico", "2 dígitos".
2. día de la semana:
   la representación del día de la semana.
   Los valores posibles son "estrecho", "corto", "largo".
3. año:
   La representación del año.
   Los valores posibles son "numérico", "2 dígitos".
4. mes:
   La representación del mes.
   Los valores posibles son "numérico", "2 dígitos", "estrecho", "corto", "largo".
5. hora:
   la representación de la hora.
   Los valores posibles son "numérico", "2 dígitos".
6. minuto: La representación del minuto.
   Los valores posibles son "numérico", "2 dígitos".
7. segundo:
   La representación del segundo.
   Los valores posibles son "numéricos", 2 dígitos ".

Todas estas llaves son opcionales. Puede cambiar el número de valores de opciones según sus requisitos, y esto también reflejará la presencia de cada término de fecha y hora.

Nota: Si solo desea configurar las opciones de contenido, pero aún usa la configuración regional actual, pasar nullel primer parámetro causará un error. Usar en su undefinedlugar.

Para diferentes idiomas:

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

Puedes usar más opciones de idioma.

Por ejemplo

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

También puede usar el toLocaleString()método para el mismo propósito. La única diferencia es que esta función proporciona el tiempo cuando no pasa ninguna opción.

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

Referencias

• toLocaleString()

• toLocaleDateString()

Use la biblioteca date.format :

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

devoluciones:

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

formato de fecha en npm

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

Si es necesario formatear rápidamente su fecha usando JavaScript llanura, uso getDate, getMonth + 1, getFullYear, getHoursy getMinutes:

var d = new Date();

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

// 16-5-2015 9:50

O, si necesita que se rellene con ceros:

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

Bueno, lo que quería era convertir la fecha de hoy en una cadena de fecha amigable con MySQL como 2012-06-23, y usar esa cadena como parámetro en una de mis consultas. La solución simple que he encontrado es esta:

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

Tenga en cuenta que la solución anterior no tiene en cuenta el desplazamiento de su zona horaria.

Puede considerar usar esta función en su lugar:

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

Esto le dará la fecha correcta en caso de que esté ejecutando este código alrededor del inicio / final del día.

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

Función de formato personalizado:

Para formatos fijos, una función simple hace el trabajo. El siguiente ejemplo genera el 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

El formato OP se puede generar 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: Sin embargo, generalmente no es una buena idea extender las bibliotecas estándar de JavaScript (por ejemplo, agregando esta función al prototipo de Fecha).

Una función más avanzada podría generar resultados configurables basados ​​en un parámetro de formato.

Si escribir una función de formato es demasiado largo, hay muchas bibliotecas alrededor de las cuales lo hace. Algunas otras respuestas ya las enumeran. Pero el aumento de las dependencias también tiene su contrapartida.

Funciones de formato estándar ECMAScript:

Desde versiones más recientes de ECMAScript, la Dateclase tiene algunas funciones de formato específicas:

toDateString : depende de la implementación, muestra solo la fecha.

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 : muestra la fecha y hora 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 : depende de la implementación, una fecha en formato local.

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

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

toLocaleString : depende de la implementación, una fecha y hora en formato local.

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 : depende de la implementación, una hora en formato local.

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

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

toString : toString genérico para fecha.

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: es posible generar resultados personalizados a partir de esos formatos>

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

Fragmentos de ejemplos:

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

Si ya está utilizando jQuery UI en su proyecto, puede hacerlo de esta manera:

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

// formatted will be 'Jul 8, 2014'

Aquí están disponibles algunas opciones de formato de fecha de selector de fecha para jugar .

Creo que puedes usar el método de fecha no estándartoLocaleFormat(formatString)

formatString: una cadena de formato en el mismo formato esperado por la strftime()función en C.

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

Referencias

• tolocaleformat
• Strftime

Plain JavaScript es la mejor opción para pequeños onetímeros.

Por otro lado, si necesita más cosas de citas , MomentJS es una gran solución.

Por ejemplo:

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

En los navegadores modernos (*) , puede hacer esto:

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

Salida si se ejecuta hoy (24 de enero de 2016):

'24-Jan-2016'

(*) Según MDN , "navegadores modernos" significa Chrome 24+, Firefox 29+, Internet Explorer 11, Edge 12+, Opera 15+ y Safari de compilación nocturna .

Usted debe echar un vistazo a date.js . Agrega muchos ayudantes convenientes para trabajar con fechas, por ejemplo, en su caso:

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

Primeros pasos: http://www.datejs.com/2007/11/27/getting-started-with-datejs/

Puedo obtener el formato solicitado en una línea sin bibliotecas ni métodos de fecha, solo expresiones regulares:

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

En mis pruebas, esto funciona de manera confiable en los principales navegadores (Chrome, Safari, Firefox e IE). Como señaló @RobG, la salida de Date.prototype.toString () depende de la implementación, así que solo pruebe la salida para asegurarse funciona directamente en tu motor de JavaScript. Incluso puede agregar algo de código para probar el resultado de la cadena y asegurarse de que coincida con lo que espera antes de reemplazar la expresión regular.

@ Sébastien: soporte alternativo para todos los navegadores

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

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

OK , tenemos algo llamado Intl que es muy útil para formatear una fecha en JavaScript en estos días:

Su fecha de la siguiente manera:

var date = '10/8/2010';

Y cambia a Fecha usando nueva Fecha () como a continuación:

date = new Date(date);

Y ahora puede formatearlo de la forma que desee utilizando una lista de configuraciones regionales como la siguiente:

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

Si desea exactamente el formato que mencionó anteriormente, puede hacer:

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

Y el resultado será:

"10-Aug-2010"

Para obtener más información, consulte la API Intl y la documentación Intl.DateTimeFormat .

Usando una plantilla de cadena ECMAScript Edition 6 (ES6 / ES2015):

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

Si necesita cambiar los delimitadores:

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

Solución empaquetada: Luxon

Si desea utilizar una solución única para todos, le recomiendo utilizar Luxon (una versión modernizada de Moment.js ) que también formatea en muchos entornos locales / idiomas y toneladas de otras características.

Luxon está alojado en el sitio web Moment.js y desarrollado por un desarrollador de Moment.js porque Moment.js tiene limitaciones que el desarrollador quería abordar pero no pudo.

Instalar:

npm install luxono yarn add luxon(visite el enlace para otros métodos de instalación)

Ejemplo:

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

Rendimientos:

10-ago-2010

Solución manual

Utilizando un formato similar a Moment.js, Class DateTimeFormatter (Java) y Class SimpleDateFormat (Java) , implementé una solución integral formatDate(date, patternStr)donde el código es fácil de leer y modificar. Puede mostrar la fecha, hora, AM / PM, etc. Consulte el código para obtener más ejemplos.

Ejemplo:

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

( formatDatese implementa en el fragmento de código a continuación)

Rendimientos:

Viernes 12 de octubre de 2018 18: 11: 23: 445

Pruebe el código haciendo clic en "Ejecutar fragmento de código".

Patrones de fecha y hora

yy= Año de 2 dígitos; yyyy= año completo

M= mes de dígitos; MM= Mes de 2 dígitos; MMM= nombre corto del mes; MMMM= nombre completo del mes

EEEE= nombre completo del día de la semana; EEE= nombre corto entre semana

d= día de dígitos; dd= Día 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 = milisegundos

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

Gracias @Gerry por mencionar a Luxon.

Aquí hay un código que acabo de escribir para manejar el formato de fecha para un proyecto en el que estoy trabajando. Imita la funcionalidad de formato de fecha PHP para satisfacer mis necesidades. Siéntase libre de usarlo, solo está extendiendo el objeto Date () ya existente. Puede que esta no sea la solución más elegante, pero está funcionando para mis necesidades.

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

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

        return month_names[this.getMonth()];
    }

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

        return month_abbrs[this.getMonth()];
    }

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

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

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

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

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

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

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

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

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

        return month_day_counts[this.getMonth()];
    } 

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

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

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

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

Una solución de JavaScript sin usar bibliotecas externas:

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"

Más documentación en developer.mozilla.org

Si está utilizando jQuery UI en su código, hay una función incorporada llamada formatDate(). Lo estoy usando de esta manera para formatear la fecha de hoy:

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

Puede ver muchos otros ejemplos de fecha de formato en la documentación de jQuery UI .

Tenemos muchas soluciones para esto, pero creo que la mejor de ellas es Moment.js. Así que personalmente sugiero usar Moment.js para operaciones de fecha y hora.

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

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

Una forma útil y flexible para formatear DateTimes en JavaScript es 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,'-'));

El resultado es: "12-Oct-2017"

Los formatos de fecha y hora se pueden personalizar utilizando el argumento de opciones.

El Intl.DateTimeFormatobjeto es un constructor de objetos que permite el formato de fecha y hora sensible al lenguaje.

Sintaxis

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

Parámetros

locales

Opcional. Una cadena con una etiqueta de idioma BCP 47, o una matriz de tales cadenas. Para ver la forma general y la interpretación del argumento de las configuraciones regionales, consulte la página Intl. Se permiten las siguientes claves de extensión 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".

Opciones

Opcional. Un objeto con algunas o todas las siguientes propiedades:

localeMatcher

El algoritmo de coincidencia de la configuración regional a utilizar. Los valores posibles son "lookup"y "best fit"; el valor predeterminado es "best fit". Para obtener información sobre esta opción, consulte la página Intl.

zona horaria

La zona horaria a utilizar. El único valor que las implementaciones deben reconocer es "UTC"; el valor predeterminado es la zona horaria predeterminada del tiempo de ejecución. Implementaciones también pueden reconocer los nombres zona horaria de la base de datos de zona horaria IANA, tales como "Asia/Shanghai", "Asia/Kolkata","America/New_York" .

hora12

Si se debe usar el tiempo de 12 horas (en oposición al tiempo de 24 horas). Los valores posibles son truey false; el valor predeterminado depende de la configuración regional.

formatMatcher

El algoritmo de coincidencia de formato a utilizar. Los valores posibles son "basic"y "best fit"; el valor predeterminado es"best fit" . Consulte los siguientes párrafos para obtener información sobre el uso de esta propiedad.

Las siguientes propiedades describen los componentes de fecha y hora para usar en la salida formateada y sus representaciones deseadas. Se requieren implementaciones para admitir al menos los siguientes subconjuntos:

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

Las implementaciones pueden admitir otros subconjuntos, y las solicitudes se negociarán con todas las combinaciones de representación de subconjuntos disponibles para encontrar la mejor coincidencia. Hay dos algoritmos disponibles para esta negociación y seleccionados por la propiedad formatMatcher: una especificada completamente"basic" algoritmo y un algoritmo de "mejor ajuste" dependiente de la implementación.

día laborable

La representación del día de la semana. Los valores posibles son "narrow", "short", "long".

era

La representación de la época. Los valores posibles son "narrow", "short", "long".

año

La representación del año. Los valores posibles son "numeric", "2-digit".

mes

La representación del mes. Los valores posibles son "numeric", "2-digit", "narrow", "short", "long".

día

La representación del día. Los valores posibles son "numeric", "2-digit".

hora

La representación de la hora. Los valores posibles son "numeric", "2-digit".

minuto

La representación del minuto. Los valores posibles son "numeric", "2-digit".

segundo

La representación del segundo. Los valores posibles son "numeric", "2-digit".

timeZoneName

La representación del nombre de la zona horaria. Los valores posibles son "short", "long". El valor predeterminado para cada propiedad de componente de fecha y hora es indefinido, pero si todas las propiedades de componente son indefinidas, se supone que el año, mes y día son "numeric".

Revisa en linea

Más detalles

Esto puede ayudar con el problema:

var d = new Date();

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

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

Así es como lo implementé para mis complementos 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 tiene excelentes extensiones para el objeto Date, incluido un Date.format método .

Ejemplos de la documentación:

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

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

Para cualquiera que busque una solución ES6 realmente simple para copiar, pegar y adoptar:

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 puede llegar a LocaleDateString para devolver solo ciertas partes y luego puede unirse a ellas como lo desee:

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

Deberías echar un vistazo a DayJs Es un remake de momentJs pero una arquitectura modular orientada de manera más ligera.

Alternativa rápida de 2kB a Moment.js con la misma API moderna

Day.js es una biblioteca minimalista de JavaScript que analiza, valida, manipula y muestra fechas y horas para navegadores modernos con una API en gran medida compatible con Moment.js. Si usa Moment.js, ya sabe cómo usar 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 obtener "10-Ago-2010", intente:

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 compatibilidad con el navegador, consulte toLocaleDateString .