Cómo formatear una fecha de JavaScript

2222

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

leora
fuente
205
Como de costumbre: ¡cuidado, EL MES ES CERO INDEXADO! Así que enero es cero, no uno ...
Christophe Roussy
12
También tenga cuidado, myDate.getDay()no devuelve el día de la semana, sino la ubicación del día de la semana relacionada con la semana. myDate.getDate()Devuelve el día de la semana actual .
Jimenemex
3
Para formatear DateTimes en javascript use el Intl.DateTimeFormatobjeto Lo describo en mi publicación: Publicar . Creo una solución en línea para su respuesta por Intl.DateTimeFormat Check Online
Iman Bahrampour
55
Puedes usartoLocaleDateString
onmyway133
12
Le tomó tanto tiempo a JavaScript obtener la URL como un objeto estandarizado, donde puede extraer una clave de parámetro de consulta, tomar el protocolo, tomar el dominio de nivel superior, etc. Pueden hacer ES6 ES7 pero aún no pueden simplemente poner una fecha estándar formateador / analizador de tiempo en 2019? Es como si estuvieran pensando "hmmm sí ... quién en la tierra usando javascript tendría que lidiar con horarios y fechas regularmente ..."
ahnbizcad

Respuestas:

1291

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

Marko
fuente
370
Realmente considere usar una biblioteca como Moment.js o Date.js en su lugar. Este problema se ha resuelto muchas veces.
Benjamin Oakes
242
¿Por qué no incluyen una función en el Dateobjeto para hacer esto?
Nayan
68
Un punto importante es que el método getMonth () devuelve un índice de mes basado en 0, por ejemplo, enero devolverá 0 febrero devolverá 1, etc ...
Marko
628
moment.js 2.9.0 tiene 11.6k comprimidos, este ejemplo tiene 211 bytes comprimidos.
mrzmyr
26
Debe tenerse en cuenta que nunca, nunca, use document.write (). Enormes problemas de seguridad y rendimiento.
Matt Jensen
2009

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

ajeet kanojia
fuente
45
Estaba a punto de usarlo moment.jspara un formato simple. Afortunadamente, hice una búsqueda adicional en Google y descubrí que ya hay una API nativa haciendo esto. Guardado una dependencia externa. ¡Increíble!
LeOn - Han Li
21
Parece que esta respuesta debería ser la mejor respuesta "actual". También usé la opción "hour12: true" para usar el formato de 12 horas frente al de 24 horas. Tal vez debería agregarse a su lista de resumen en la respuesta.
Doug Knudsen
14
No recibo los votos positivos en esta respuesta. No resuelve el problema en la pregunta. (es decir, dame una fecha que parezca el 10 de agosto de 2010). Usar toLocaleDateString () es bastante difícil. La biblioteca date.format parece ser la mejor solución (al menos para usuarios de Node)
Iarwa1n
3
Si pasar undefinedcomo el primer parámetro de configuración regional se siente arbitrario, puede pasar el valor "default"para utilizar la configuración regional del navegador, según los documentos de MDN developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
wbharding
3
@ Iarwa1n Esta respuesta no se ha mencionado, pero puede usar toLocaleDateString para devolver solo ciertas partes que luego puede unir como desee. Mira mi respuesta a continuación. date.toLocaleDateString("en-US", { day: 'numeric' }) + "-"+ date.toLocaleDateString("en-US", { month: 'short' }) + "-" + date.toLocaleDateString("en-US", { year: 'numeric' })debería dar16-Nov-2019
K Vij
609

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/

RobertPitt
fuente
44
¡Esta podría parecer la solución más larga, pero comprimida y utilizada en un sitio que usa fechas bastante bien sería la mejor solución!
RobertPitt
55
Esta solución también está disponible como paquete npm
David
19
Hay 14 problemas abiertos con el complemento anterior. Incluso encontré uno :(
Amit Kumar Gupta
66
Obtengorequire is not defined
Hooli
16
OP solicitó una solución JS
Luke Pring
524

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
sebastian.i
fuente
¿Puedes decir cómo obtener formato como el lunes 23 de marzo de 2018?
Sachin HR
@SachinHR, vea la respuesta anterior: stackoverflow.com/a/34015511/4161032 . El toLocaleDateString()puede dar formato a la fecha con nombres mes / día localizadas.
sebastian.i
12
También puede rellenar ceros con.toString().padStart(2, '0')
Benny Jobigan
1
@DmitryoN, si es necesario, el año se puede completar de la misma manera:("000" + d.getFullYear()).slice(-4)
sebastian.i
44
@BennyJobigan Cabe mencionar que String.padStart()solo está disponible en ECMAScript 2017.
JHH
413

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.

simo
fuente
99
Puede hacer new Date(date + " UTC")para engañar a la zona horaria, y puede eliminar la línea setMinutes. Hombre, JavaScript está sucio
Vajk Hermecz
23
Versión compatible con Y10K: var today = new Date().toISOString().slice(0,-14):)
Alex Shaffer
23
O asínew Date().toISOString().split('T')[0]
rofrol
44
new Date().toISOString().slice(0, 16).replace('T',' ')incluir tiempo
Gerrie van Wyk
3
Simplemente comentando que la falta de zona horaria no es un inconveniente menor "al comienzo / al final del día". En Australia, por ejemplo, la fecha puede estar equivocada hasta las 11 de la mañana, ¡casi la mitad del día!
Steve Bennett
230

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

Adrian Maire
fuente
3
Gracias por el último. Útil para configurar el valor de fecha de las entradas de fecha HTML.
daCoda
new Date().toLocaleDateString()mm/dd/yyyyno te da por dd/mm/yyyyfavor corrige eso.
Aarvy
1
@RajanVerma: toLocaleDateString proporciona su configuración regional, que probablemente sea mm / dd / aaaa porque se encuentra en EE. UU. Aquí, la configuración regional para la fecha es dd / mm / aaaa (ese es exactamente el punto de "configuración regional"). Escribí "eg" porque no es la especificación, sino un ejemplo de salida.
Adrian Maire
177

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 .

Dmitry Pavlov
fuente
13
Como dije, si jQueryUI ya se usa en el proyecto, ¿por qué no reutilizar la función de formato de fecha datepicker? Hola chicos, no entiendo por qué obtengo un voto negativo sobre mi respuesta. Por favor explique.
Dmitry Pavlov
77
Puede ser porque alguien podría incluir jQuery UI solo para la función de formato de fecha, o podría ser porque el selector de fecha es una parte opcional de la biblioteca, pero probablemente sea porque odiar jQuery está de moda.
sennett
12
No creo que sea posible evitar por completo todas las decisiones extrañas que alguien podría hacer por error o sin sentido.
Dmitry Pavlov
77
@sennett: ¿Odiar a jQuery está de moda? Así que está caminando por ahí con sus pantalones hasta la mitad de sus piernas, supongo ... que es más o menos lo tratando de código sin jQuery era como para la mayor parte de la historia de JavaScript ...
Michael Scheper
55
En cualquier caso, esta es una respuesta útil y completamente razonable; nuevamente, el 70% de los sitios web usan jQuery. No debería ser rechazado debido a las creencias religiosas de los desarrolladores.
Michael Scheper el
133

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

Sébastien
fuente
160
toLocaleFormat () parece funcionar solo en Firefox. Tanto IE como Chrome me están fallando.
fitzgeraldsteele
16
Chrome tiene el método .toLocaleString ('en'). Como parece, el nuevo navegador admite este desarrollador.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
apocalypz
8
Lea la advertencia aquí: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Carson Reinke
66
esta sería la mejor solución si todos pudieran implementarlo. maldita sea ie / chrome
santa
66
@santa: De hecho. Tal vez haya una razón justa para no seguir el ejemplo de Mozilla en esto, pero el hecho de que incluso ES6 no tenga una función estándar para esto muestra que todavía es el lenguaje de un hacker, no el lenguaje de un desarrollador.
Michael Scheper
105

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
Mite Mitreski
fuente
2
importante mencionar: no lo use a YYYYmenos que sepa la diferencia entre YYYYy yyyy: stackoverflow.com/questions/15133549/…
Domin
@Domin que es específico de NSDateFormatter en iOS, como se usa, por ejemplo, desde Objective-C o Swift. Esta pregunta es sobre Javascript en el navegador, y esta respuesta utiliza MomentJS, en el que YYYY(no yyyy) es el año estándar y GGGG(no YYYY) es el año basado en la semana ISO.
Mark Reed
2
El momento es 100% no obsoleto @Gerry
Liam
97

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 .

John Slegers
fuente
¿Hay alguna manera de verificar si esta función es compatible y, de lo contrario, usar una solución más simple?
James Wierzba
@JamesWierzba: ¡Podrías usar este polyfill !
John Slegers
Esto ni siquiera aparece en caniuse.com: /
Charles Wood
51

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/

NiKo
fuente
Gracias. Esta es una biblioteca muy completa y completa, con un tamaño reducido.
mitcheljh
Creo que actualmente obtengo un número de Date.parse mientras let date = new Date (fromString) tiene más funciones. Desafortunadamente, para mi sorpresa, toString también parece mostrar un valor predeterminado sin interpretar el argumento pasado para formatearlo. Usar NodeJS 11+ toDateString es una salida más corta pero no requiere formato. Todo lo que veo es un muy intrincado toLocaleDateString
Master James
38

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.

JD Smith
fuente
console.log(new Date().toString().replace(/\S+\s(\S+)\s(\d+)\s(\d+)\s.*/,'$2-$1-$3'));
John
@ André - Estoy de acuerdo. Si este fuera mi código, seguramente incluiría un comentario junto a él que explica la expresión regular y da un ejemplo de la entrada y la salida correspondiente.
JD Smith
¿qué tal parte del tiempo (HH: mm: ss)?
unruledboy
@unruledboy var d = (nueva Fecha ()). toString (). reemplazar (/ \ S + \ s (\ S +) \ s (\ d +) \ s (\ d +) \ s (\ S +) \ s. * / , '$ 2- $ 1- $ 3 $ 4'); - o para obtener solo la parte del tiempo sin la fecha en sí, use: var d = (nueva Fecha ()). toString (). replace (/ \ S + \ s (\ S +) \ s (\ d +) \ s (\ d +) \ s (\ S +) \ s. * /, '$ 4');
JD Smith
37

@ 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

usuario956584
fuente
55
En lugar de hacer .replace (), simplemente podría usar 'en-GB' como configuración regional. :)
Roberto14
1
Esto es realmente agradable, por ejemplo, new Date().toLocaleDateString("en-EN", {month: "short", weekday: "short", day: "2-digit", year: "numeric"})vuelve"Wed, Sep 06, 2017"
Peter T.
37

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 .

Alireza
fuente
No es compatible con IE
Pantalones
Es pero solo por IE11, IE10- han estado fuera de vida antes de que esto existiera, por lo que es comprensible. 92% de caniuse, que es bastante bueno caniuse.com/#search=datetimeformat
Tofandel
32

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);
vdegenne
fuente
30

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.

lewdev
fuente
1
Por cierto, la SimpleDateFormatclase problemática fue suplantada hace años por la java.time.format.DateTimeFormatterclase.
Basil Bourque
1
@BasilBourque, señaló. Ambos usan los mismos patrones. Estuve en un proyecto anterior a Java8 durante 5 años, así que nunca estuve expuesto a las cosas más nuevas. ¡Gracias!
lewdev
Consulte el proyecto ThreeTen-Backport para Java 6 y 7, para obtener la mayor parte de la funcionalidad java.time con una API casi idéntica.
Basil Bourque
@BasilBourque gracias por la referencia, pero ya no trabajo en ese proyecto, pero definitivamente lo tendré en cuenta cuando surja.
lewdev
2
momento es obsoleta, el uso luxon
Gerry
19

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
 * 
 ************************************/
jmiraglia
fuente
18

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)
Prasad DLV
fuente
16

new Date().toLocaleDateString()

// "3/21/2018"

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

Kirk Strobeck
fuente
1
Debe tenerse en cuenta que nunca, nunca, use document.write (). Enormes problemas de seguridad y rendimiento
Eugene Fidelin
15

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>

Vijay Maheriya
fuente
¿por qué estás incluyendo a jquery?
Ced
1
Ohh lo siento, no es necesario. Gracias @Ced
Vijay Maheriya
¿Cómo proporcionar la fecha que tengo para moment.js? Creo que siempre lleva tiempo actual.
Dave Ranjan
1
@DaveRanjan, creo que necesitas convertir tu fecha personalizada. Entonces use esto: console.log (moment ('2016-08-10'). Format ('DD-MMM-YYYY'));
Vijay Maheriya
Sí, lo descubrí después. Gracias :)
Dave Ranjan
15

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

Iman Bahrampour
fuente
15

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

Fecha para ubicar formato

Señor nsubuga
fuente
2
o d.toLocaleDateString('en-US', options);si estás en los Estados Unidos.
BishopZ
Esta fue mi solución. Gracias.
Steven Rogers
13

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;
}
Amit Kumar Gupta
fuente
¿A qué paquete te refieres?
lbrahim
Esto tiene un error: los nombres de los meses se reemplazan primero, luego también se reemplazará el nombre del mes. Por ejemplo Marchse convertirá 3archcon este código.
ntaso
1
Cambie la línea de 'M'a format = format.replace("M(?!M)", (dt.getMonth()+1).toString());y póngala por encima de la línea con'MMMM'
ntaso
9
var today = new Date();
var formattedToday = today.toLocaleDateString() + ' ' + today.toLocaleTimeString();
Gennadiy Ryabkin
fuente
8

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}')
Hasen
fuente
8

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

Hinrich
fuente
8

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
K Vij
fuente
8

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>

Melchia
fuente
7

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 .

sitio
fuente
No necesitaba un "-", ¡aquí hay una versión más corta con hora, fecha y zona horaria! fecha = nueva Fecha (); date.toLocaleDateString (indefinido, {día: '2 dígitos', mes: 'corto', año: 'numérico', hora: 'numérico', minuto: 'numérico', timeZoneName: 'corto'}); :)
varun