Mostrar contenido

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.

¿Sabías qué? Podrás evitar los principales errores al elegir tu empresa de Web Hosting leyendo nuestro artículo ¿Cuál es el mejor web hosting?.

Opciones de Formato

Firma del método
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.

JavaScript
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"
Token Salida
Month M 1 2 … 11 12
Mo 1st 2nd … 11th 12th
MM 01 02 … 11 12
MMM Jan Feb … Nov Dec
MMMM January February … November December
Quarter Q 1 2 3 4
Qo 1st 2nd 3rd 4th
Day of Month D 1 2 … 30 31
Do 1st 2nd … 30th 31st
DD 01 02 … 30 31
Day of Year DDD 1 2 … 364 365
DDDo 1st 2nd … 364th 365th
DDDD 001 002 … 364 365
Day of Week d 0 1 … 5 6
do 0th 1st … 5th 6th
dd Su Mo … Fr Sa
ddd Sun Mon … Fri Sat
dddd Sunday Monday … Friday Saturday
Day of Week (Locale) e 0 1 … 5 6
Day of Week (ISO) E 1 2 … 6 7
Week of Year w 1 2 … 52 53
wo 1st 2nd … 52nd 53rd
ww 01 02 … 52 53
Week of Year (ISO) W 1 2 … 52 53
Wo 1st 2nd … 52nd 53rd
WW 01 02 … 52 53
Year YY 70 71 … 29 30
YYYY 1970 1971 … 2029 2030
YYYYYY -001970 -001971 … +001907 +001971
Nota: Años ampliados (cubre el rango de valores de tiempo completo de aproximadamente 273.790 años hacia adelante o hacia atrás desde el 1 de enero de 1970)
Y 1970 1971 … 9999 +10000 +10001
Nota: Cumple con la norma ISO 8601 para fechas posteriores al año 9999
Era Year y 1 2 … 2020 …
Era N, NN, NNN BC AD
Nota: nombre abreviado de la era
NNNN Before Christ, Anno Domini
Nota: nombre completo de la era
NNNNN BC AD
Nota: nombre corto de la era
Week Year gg 70 71 … 29 30
gggg 1970 1971 … 2029 2030
Week Year (ISO) GG 70 71 … 29 30
GGGG 1970 1971 … 2029 2030
AM/PM A AM PM
a am pm
Hour H 0 1 … 22 23
HH 00 01 … 22 23
h 1 2 … 11 12
hh 01 02 … 11 12
k 1 2 … 23 24
kk 01 02 … 23 24
Minute m 0 1 … 58 59
mm 00 01 … 58 59
Second s 0 1 … 58 59
ss 00 01 … 58 59
Fractional Second S 0 1 … 8 9
SS 00 01 … 98 99
SSS 000 001 … 998 999
SSSS … SSSSSSSSS 000[0..] 001[0..] … 998[0..] 999[0..]
Time Zone z or zz EST CST … MST PST
Nota: a partir de 1.6.0, los tokens de formato z/zz han quedado obsoletos en los objetos moment simples. Lee más sobre esto aquí. Sin embargo, funcionan si estás utilizando una zona horaria específica con el complemento moment-timezone.
Z -07:00 -06:00 … +06:00 +07:00
ZZ -0700 -0600 … +0600 +0700
Unix Timestamp X 1360013296
Unix Millisecond Timestamp x 1360013296123

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.

Descripción Formato Salida
Hora LT 8:30 PM
Hora con segundos LTS 8:30:25 PM
Número del mes, día del mes, año L 09/04/1986
l 9/4/1986
Nombre del mes, día del mes, año LL September 4, 1986
ll Sep 4, 1986
Nombre del mes, día del mes, año, hora LLL September 4, 1986 8:30 PM
lll Sep 4, 1986 8:30 PM
Nombre del mes, día del mes, día de la semana, año, hora LLLL Thursday, September 4, 1986 8:30 PM
llll Thu, Sep 4, 1986 8:30 PM

l ll lll llll están disponibles en 2.0.0.

¿Sabías qué? Podrás evitar los principales errores al elegir tu empresa de Web Hosting leyendo nuestro artículo ¿Cuál es el mejor web hosting?.

LTS se agregó en 2.8.4.

Escapando caracteres

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

JavaScript
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:

JavaScript
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
¿Sabías qué? Podrás evitar los principales errores al elegir tu empresa de Web Hosting leyendo nuestro artículo ¿Cuál es el mejor web hosting?.

Tiempo desde ahora

Firma del método
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.

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

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

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

Rango Clave Salida de muestra
0 a 44 segundos s a few seconds ago
unset ss 44 seconds ago
45 a 89 segundos m a minute ago
90 segundos a 44 minutos mm 2 minutes ago … 44 minutes ago
45 a 89 minutos h an hour ago
90 minutos a 21 horas hh 2 hours ago … 21 hours ago
22 a 35 horas d a day ago
36 horas a 25 días dd 2 days ago … 25 days ago
26 a 45 días M a month ago
45 a 319 días MM 2 months ago … 10 months ago
320 a 547 días (1.5 años) y a year ago
548 días+ yy 2 years ago … 20 years ago

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

Firma del método
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.

JavaScript
var a = moment([2007, 0, 28]);
var b = moment([2007, 0, 29]);
a.from(b) // "a day ago"
¿Sabías qué? Podrás evitar los principales errores al elegir tu empresa de Web Hosting leyendo nuestro artículo ¿Cuál es el mejor web hosting?.

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

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

JavaScript
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

Firma del método
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.

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

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

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

¿Sabías qué? Podrás evitar los principales errores al elegir tu empresa de Web Hosting leyendo nuestro artículo ¿Cuál es el mejor web hosting?.
Rango Clave Salida de muestra
0 a 44 segundos s in seconds
45 a 89 segundos m in a minute
90 segundos a 44 minutos mm in 2 minutes … in 44 minutes
45 a 89 minutos h in an hour
90 minutos a 21 horas hh in 2 hours … in 21 hours
22 a 35 horas d in a day
36 horas a 25 días dd in 2 days … in 25 days
26 a 45 días M in a month
45 a 319 días MM in 2 months … in 10 months
320 a 547 días (1.5 años) y in a year
548 días+ yy in 2 years … in 20 years

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.

¿Sabías qué? Podrás evitar los principales errores al elegir tu empresa de Web Hosting leyendo nuestro artículo ¿Cuál es el mejor web hosting?.
Última actualización