Formas de mostrar contenido de Moment.js

Una vez finalizados el análisis (parsing) y la manipulación, necesitas alguna forma de mostrar el moment.

Opciones de Formato

moment().format();
moment().format(String);

Esta es la opción de visualización más sólida. Toma una cadena de tokens y los reemplaza con sus valores correspondientes.

moment().format();                                // "2014-09-08T08:02:17-05:00" (ISO 8601, no fractional seconds)
moment().format("dddd, MMMM Do YYYY, h:mm:ss a"); // "Sunday, February 14th 2010, 3:25:50 pm"
moment().format("ddd, hA");                       // "Sun, 3PM"
moment().format("[Today is] dddd");               // "Today is Sunday"
moment('gibberish').format('YYYY MM DD');         // "Invalid date"

X se agregó en 2.0.0.

e E gg gggg GG GGGG se agregaron en 2.1.0.

x se agregó en 2.8.4.

SSSS a SSSSSSSSS se agregaron en 2.10.5. Muestran 3 dígitos significativos y el resto se rellena con ceros.

k y kk se agregaron en 2.13.0.

Formatos regionales (según locale)

Debido a que el formato preferido difiere según la ubicación, existen algunos tokens que se pueden usar para formatear un moment según su ubicación.

Hay variaciones de mayúsculas y minúsculas en los mismos formatos. La versión en minúscula pretende ser la versión abreviada de su contraparte en mayúscula.

l ll lll llll están disponibles en 2.0.0.

LTS se agregó en 2.8.4.

Escapando caracteres

Para escapar caracteres en cadenas de formato, puedes colocar los caracteres entre corchetes.

moment().format('[today] dddd'); // 'today Sunday'

Similitudes y diferencias con LDML

Nota: Si bien estos formatos de fecha son muy similares a los formatos de fecha LDML, existen algunas diferencias menores con respecto al día del mes, el día del año y el día de la semana.

Para obtener un desglose de algunos tokens de formato de fecha diferentes en diferentes configuraciones regionales, consulta este cuadro de tokens de formato de fecha.

Otros tokens

Si te sientes más cómodo trabajando con strftime en lugar de tokens de análisis similares a LDML, puedes utilizar el complemento de Ben Oakes. benjaminoakes/moment-strftime.

Formato predeterminado

Al llamar a moment#format sin un formato, el valor predeterminado será moment.defaultFormat. Fuera de la caja, moment.defaultFormat es el formato ISO8601 YYYY-MM-DDTHH:mm:ssZ.

A partir de la versión 2.13.0, cuando estás en modo UTC, el formato predeterminado se rige por moment.defaultFormatUtc que tiene el formato YYYY-MM-DDTHH:mm:ss[Z]. Esto devuelve Z como desplazamiento, en lugar de +00:00.

En ciertos casos, una zona horaria local (como Atlantic/Reykjavik) puede tener un desplazamiento cero y se considerará UTC. En tales casos, puede resultar útil configurar moment.defaultFormat y moment.defaultFormatUtc para que utilicen el mismo formato.

Cambiar el valor de moment.defaultFormat solo afectará el formato y no afectará el análisis. Por ejemplo:

moment.defaultFormat = "DD.MM.YYYY HH:mm";
// parse con .toDate()
moment('20.07.2018 09:19').toDate() // Invalid date
// formatea la cadena de fecha con el nuevo defaultFormat y luego analiza (parse)
moment('20.07.2018 09:19', moment.defaultFormat).toDate() // Fri Jul 20 2018 09:19:00 GMT+0300

Tiempo desde ahora

moment().fromNow();
moment().fromNow(Boolean);

Una forma común de mostrar el tiempo es manejada por moment#fromNow. A esto a veces se le llama tiempo atrás o tiempo relativo.

moment([2007, 0, 29]).fromNow(); // 4 years ago

Si pasas true, puedes obtener el valor sin el sufijo.

moment([2007, 0, 29]).fromNow();     // 4 years ago
moment([2007, 0, 29]).fromNow(true); // 4 years

Las cadenas base están personalizadas según la configuración regional actual. El tiempo se redondea al segundo más cercano.

El desglose de qué cadena se muestra para cada período de tiempo se describe en la siguiente tabla.

Nota: A partir de la versión 2.10.3, si el objeto moment objetivo no es válido, el resultado es la cadena de fecha no válida localizada.

Nota: La clave ss se agregó en 2.18.0. Es un umbral opcional. Nunca se mostrará A MENOS que el usuario establezca manualmente el umbral ss. Hasta que se establezca el umbral ss, el valor predeterminado es el valor del umbral s menos 1 (por lo tanto, invisible para el usuario).

Tiempo desde X

moment().from(Moment|String|Number|Date|Array);
moment().from(Moment|String|Number|Date|Array, Boolean);

Es posible que desees mostrar un moment en relación con un tiempo distinto al actual. En ese caso, puedes usar moment#from.

var a = moment([2007, 0, 28]);
var b = moment([2007, 0, 29]);
a.from(b) // "a day ago"

El primer parámetro es cualquier cosa que puedas pasar a moment() o a un Moment existente.

var a = moment([2007, 0, 28]);
var b = moment([2007, 0, 29]);
a.from(b);                     // "a day ago"
a.from([2007, 0, 29]);         // "a day ago"
a.from(new Date(2007, 0, 29)); // "a day ago"
a.from("2007-01-29");          // "a day ago"

Al igual que moment#fromNow, pasar true como segundo parámetro devuelve un valor sin el sufijo. Esto es útil siempre que necesites tener un período de tiempo legible por humanos.

var start = moment([2007, 0, 5]);
var end   = moment([2007, 0, 10]);
end.from(start);       // "in 5 days"
end.from(start, true); // "5 days"

A partir de la versión 2.10.3, si alguno de los puntos finales no es válido, el resultado es la cadena 'Invalid date' traducida.

Tiempo hasta ahora

moment().toNow();
moment().toNow(Boolean);

Una forma común de mostrar el tiempo es manejada por moment#toNow. A esto a veces se le llama tiempo atrás o tiempo relativo.

Esto es similar a moment.fromNow, pero proporciona el intervalo opuesto: a.fromNow() = - a.toNow().

Esto es similar a moment.to, pero está en mayúsculas y minúsculas especiales para el moment actual. Utiliza moment.to, si deseas controlar los dos puntos finales del intervalo.

moment([2007, 0, 29]).toNow(); // in 4 years

Si pasas true, puedes obtener el valor sin el prefijo.

moment([2007, 0, 29]).toNow();     // in 4 years
moment([2007, 0, 29]).toNow(true); // 4 years

Las cadenas base están personalizadas según la configuración regional actual.

El desglose de qué cadena se muestra para cada período de tiempo se describe en la siguiente tabla.

A partir de la versión 2.10.3, si el objeto moment objetivo no es válido, el resultado es la cadena 'Invalid date' localizada.