¿Cómo formateo una fecha en JavaScript?

10 minutos de lectura

avatar de usuario
leora

¿Cómo formateo un Date objeto a una cadena?

  • Como de costumbre: cuidado ¡EL MES está CERO-INDEXADO! Así que enero es cero, no uno…

    – Christophe Roussy

    19 de noviembre de 2015 a las 12:45


  • También tenga cuidado, myDate.getDay() no devuelve el día de la semana, sino el ubicación del día de la semana relacionado con la semana. myDate.getDate() devuelve el día de la semana actual.

    – Jimenemex

    18 de agosto de 2017 a las 19:47

  • Puedes usar toLocaleDateString

    – onmyway133

    5 de noviembre de 2018 a las 13:50

  • @onmyway en realidad no puedes. desarrollador.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

    – ahnbizcad

    19 de enero de 2019 a las 4:34

  • Si está buscando cómo analizar una cadena en un objeto de fecha, consulte Analizar una cadena en una fecha en JavaScript.

    – Sebastián Simón

    27/09/2021 a las 10:00

avatar de usuario
ajeet kanojia

Si necesita un poco menos de control sobre el formato que la respuesta actualmente aceptada, Date#toLocaleDateString se puede utilizar para crear representaciones estándar específicas de la configuración regional. Él locale y options Los argumentos permiten 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 laborable:

    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”, de 2 dígitos.

Todas estas claves son opcionales. Puede cambiar la cantidad 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, pase null para el primer parámetro causará un error. Usar undefined en cambio.

Para diferentes idiomas:

  1. “en-US”: para ingles
  2. “hola-IN”: para hindi
  3. “ja-JP”: para japonés

Puede utilizar 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 utilizar 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:

  • este dice que no es estándar, pero mozzarella no especifica eso

    – Pankaj Fartiyal

    16 de noviembre de 2017 a las 19:42

  • Parece que esta respuesta debería ser la mejor respuesta “actual”. También usó la opción “hora12: verdadero” para usar el formato de 12 horas frente a 24 horas. Tal vez debería agregarse a su lista de resumen en la respuesta.

    –Doug Knudsen

    17 de diciembre de 2017 a las 17:08

  • @ Iarwa1n Esta respuesta no se ha mencionado, pero puede usar toLocaleDateString para devolver solo ciertas partes a las que luego puede unirse como desee. Revisa 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 dar 16-Nov-2019

    – K Vij

    27 de noviembre de 2019 a las 20:33


  • Fue una larga excavación de los siguientes enlaces, pero encontré dónde están ocultos @MosesSchwartz: desarrollador.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

    – btalb

    6 de septiembre de 2020 a las 7:42

  • @KVij: esa es una forma muy ineficiente de formatear una fecha, especialmente considerando que hay un formatToParts método que devuelve todas las partes en una matriz de objetos.

    – RobG

    18 dic. 2020 a las 7:00

avatar de usuario
marco

Para los formatos de fecha delimitados de forma personalizada, debe extraer los componentes de fecha (u hora) de un DateTimeFormat objeto (que es parte del
API de internacionalización de ECMAScript), y luego cree manualmente una cadena con los delimitadores que desee.

Para hacer esto, puedes usar DateTimeFormat#formatToParts. Podría desestructurar la matriz, pero eso no es lo ideal, ya que la salida de la matriz depende de la configuración regional:

{ // example 1
   let f = new Intl.DateTimeFormat('en');
   let a = f.formatToParts();
   console.log(a);
}
{ // example 2
   let f = new Intl.DateTimeFormat('hi');
   let a = f.formatToParts();
   console.log(a);
}

Mejor sería asignar una matriz de formato a las cadenas resultantes:

function join(t, a, s) {
   function format(m) {
      let f = new Intl.DateTimeFormat('en', m);
      return f.format
   }
   return a.map(format).join(s);
}

let a = [{day: 'numeric'}, {month: 'short'}, {year: 'numeric'}];
let s = join(new Date, a, '-');
console.log(s);

También puede extraer las partes de un DateTimeFormat uno por uno usando
DateTimeFormat#formatpero 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 se evita con el enfoque anterior).

let d = new Date(2010, 7, 5);
let ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d);
let mo = new Intl.DateTimeFormat('en', { month: 'short' }).format(d);
let da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d);
console.log(`${da}-${mo}-${ye}`);

Cuando se trabaja con fechas y horas, generalmente vale la pena usar una biblioteca (p.
momento.js, luxón) debido a las muchas complejidades ocultas del campo.

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

  • también puede rellenar ceros con .toString().padStart(2, '0')

    – Benny Jobigan

    15 de enero de 2019 a las 10:30

  • @BennyJobigan Cabe mencionar que String.padStart() solo está disponible desde ECMAScript 2017.

    – JHH

    17 mayo 2019 a las 11:33

avatar de usuario
teocci

Bueno, lo que quería era convertir la fecha de hoy en una mysql cadena de fecha amigable 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 no toma en cuenta tu zona horaria compensar.

Podría 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 al comienzo o al final del día.

var date = new Date();

function toLocal(date) {
  var local = new Date(date);
  local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
  return local.toJSON();
}

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

// check out your devtools console
console.log(date.toJSON());
console.log(date.toISOString());
console.log(toLocal(date));

console.log(toJSONLocal(date));

avatar de usuario
Ino

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, normalmente no es una buena idea ampliar las bibliotecas estándar de JavaScript (p. ej., añadiendo esta función al prototipo de Fecha).

Una función más avanzada podría generar una salida configurable basada en un parámetro de formato.

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

Funciones de formato estándar de ECMAScript:

Desde versiones más recientes de ECMAScript, el Date class tiene algunas funciones de formato específicas:

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

https://262.ecma-international.org/#sec-date.prototype.todatestring

new Date().toDateString(); // e.g. "Fri Nov 11 2016"

aISOString: Muestra la fecha y hora ISO 8601.

https://262.ecma-international.org/#sec-date.prototype.toisostring

new Date().toISOString(); // e.g. "2016-11-21T08:00:00.000Z"

aJSON: Stringifier para JSON.

https://262.ecma-international.org/#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.

https://262.ecma-international.org/#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.

https://262.ecma-international.org/#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.

https://262.ecma-international.org/#sec-date.prototype.tolocaletimestring

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

Encadenar: Genérico toString para Fecha.

https://262.ecma-international.org/#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 una salida personalizada 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));

Especificación de la configuración regional para funciones estándar:

Algunas de las funciones estándar enumeradas anteriormente dependen de la configuración regional:

  • toLocaleDateString()
  • toLocaleTimeString()
  • toLocalString()

Esto se debe a que las diferentes culturas hacen uso de diferentes formatos y expresan su fecha u hora de diferentes maneras. La función de forma predeterminada devolverá el formato configurado en el dispositivo que ejecuta, pero esto se puede especificar configurando los argumentos (ECMA-402).

toLocaleDateString([locales[, options]])
toLocaleTimeString([locales[, options]])
toLocaleString([locales[, options]])
//e.g. toLocaleDateString('ko-KR');

Él option segundo parámetro, permite configurar un formato más específico dentro de la configuración regional seleccionada. Por ejemplo, el mes se puede mostrar como texto completo o abreviado.

toLocaleString('en-GB', { month: 'short' })
toLocaleString('en-GB', { month: 'long' })

Fragmentos de ejemplos:

console.log("1) "+  new Date().toLocaleString('en-US'));
console.log("2) "+  new Date().toLocaleString('ko-KR'));
console.log("3) "+  new Date().toLocaleString('de-CH'));

console.log("4) "+  new Date().toLocaleString('en-GB', { hour12: false }));
console.log("5) "+  new Date().toLocaleString('en-GB', { hour12: true }));

Algunas buenas prácticas con respecto a los locales:

  • A la mayoría de las personas no les gusta que sus fechas aparezcan en un formato extranjero, por lo tanto, mantenga la configuración regional predeterminada siempre que sea posible (en lugar de configurar ‘en-US’ en todas partes).
  • Implementar la conversión de/a UTC puede ser un desafío (considerando el horario de verano, la zona horaria no es un múltiplo de 1 hora, etc.). Utilice una biblioteca bien probada cuando sea posible.
  • No asuma que la ubicación se correlaciona con un país: varios países tienen muchos de ellos (Canadá, India, etc.)
  • Evite detectar la configuración regional a través de formas no estándar. Aquí puede leer acerca de las múltiples trampas: detectar la distribución del teclado, detectar el lugar por la ubicación geográfica, etc.

  • Creo que la configuración regional debe ser “en-GB” para los ejemplos del Reino Unido para obtener el formato “dd/mm/yyyy”

    – kane morgan

    8 de febrero de 2021 a las 16:13

  • Arreglé esto. Gracias

    – Adrián Maire

    8 de febrero de 2021 a las 16:56

  • Enumeró muy bien los parámetros admitidos de Intl.DateTimeFormat() constructor se enumeran aquí: desarrollador.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

    -ino

    25 de marzo de 2021 a las 7:39

  • gracias por comenzar con ejemplos que no usan “ECMA vodoo”

    – Gerfried

    26 de abril de 2021 a las 17:09

  • .toJSON() usos .toIsoString() bajo el capó (según documentos). Y uno tiene que ser consciente que las conversiones ISO se conviertan a otra zona horaria, lo que puede cambiar la parte de la fecha (ver otros comentarios). Además, parece que el OP quiere convertirse en una “configuración regional/cultura” de Oracle (etc.), no en una humana…

    – FRITA

    16 de noviembre de 2021 a las 14:25

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad