Herramientas HTML

Gratis Generador Intl.DurationFormat

Genere codigo Intl.DurationFormat para formato de duracion localizado con estilos long/short/narrow/digital.

Cargando herramienta...

Qué es Generador Intl.DurationFormat?

Intl.DurationFormat es una API integrada del navegador que formatea duraciones de tiempo según las convenciones de la locale. Dado un objeto de duración con campos como hours, minutes y seconds, produce cadenas legibles como '1 hour, 30 minutes' (inglés largo), '1 Std 30 Min.' (alemán corto) o '1:30:00' (digital). Soporta cuatro estilos: long, short, narrow y digital. Disponible en Chrome 104+ y parte de Baseline 2025.

Respuesta rápida

Genere código usando Intl.DurationFormat para mostrar duraciones de tiempo en un formato adaptado a la locale. Elija entre los estilos long, short, narrow y digital. Soporta inglés, alemán, francés, español, japonés y neerlandés. Elimine moment-duration-format y use la API nativa.

Last updated: 2026-06-02

Limitaciones

Intl.DurationFormat no está disponible en Safari a mediados de 2026. Use un polyfill o biblioteca de respaldo para usuarios de Safari, o implemente un formateador manual simple para casos básicos.
La API no agrega unidades automáticamente: { hours: 1, minutes: 90 } se formatea como '1 hour, 90 minutes', no '2 hours, 30 minutes'. Normalice su duración antes de formatear si desea conversión automática de unidades.
Cada locale determina sus propias reglas de formateo y elecciones de palabras. El estilo digital produce una salida numérica consistente, pero los estilos long/short/narrow pueden variar de maneras que afecten el ancho del layout. Pruebe en todas sus locales objetivo para evitar desbordamiento de texto.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

Cree un objeto de duración con los componentes de tiempo que desea formatear: { hours: 1, minutes: 30, seconds: 0 }.
Construya una nueva instancia de Intl.DurationFormat con su locale elegida y configuración de estilo opcional.
Llame a format(duracion) en la instancia para obtener la cadena localizada, o llame a formatToParts(duracion) para un array de componentes formateados.
Experimente con diferentes locales y estilos en la herramienta para ver cómo cambian las cadenas de duración entre idiomas.

Para qué puedes usarla

Mostrar duración de video o duración de podcast en una interfaz de reproductor multimedia localizada.
Visualizar tiempo estimado de lectura o tiempo de procesamiento en el formato de idioma preferido del usuario.
Formatear duraciones del lado del servidor (tiempos de respuesta API, tiempos de ejecución de trabajos) para paneles de administración internacionalizados.

Casos de uso

Ejemplos prácticos

Ejemplo

Visualización localizada de duración de video

Un servicio de streaming muestra las duraciones de video en la locale del espectador. Los espectadores en inglés ven '1 hour, 30 minutes', los espectadores en alemán ven '1 Std 30 Min.' y los espectadores en japonés ven '1時間30分'. Usar Intl.DurationFormat con la locale del usuario maneja los tres automáticamente.

Ejemplo

Visualización de cuenta regresiva en estilo digital

Un temporizador de cuenta regresiva para eventos muestra el tiempo restante en formato digital: '2:15:30' para 2 horas, 15 minutos, 30 segundos. Usar el estilo 'digital' con Intl.DurationFormat produce una visualización HH:MM:SS consistente en todas las locales.

Errores comunes

Pasar un Date o timestamp a Intl.DurationFormat en lugar de un objeto de duración: la API espera objetos planos con campos de duración numéricos como { hours: 1, minutes: 30 }, no timestamps o fechas.
Asumir que todas las locales usan el mismo orden de palabras o separador: el japonés coloca horas antes de minutos sin separador de palabras mientras que el inglés usa comas. Pruebe siempre sus locales objetivo en lugar de asumir patrones del inglés.
Usar el estilo 'digital' con duraciones de solo horas: una duración de { minutes: 45, seconds: 0 } en estilo digital puede mostrarse como '00:45:00' con horas iniciales. Ajuste el objeto de duración para omitir horas si no desea que se muestren.

Verificación

Abra la consola DevTools de Chrome 104+. Cree new Intl.DurationFormat('en', { style: 'long' }). Llame a .format({ hours: 1, minutes: 30, seconds: 15 }) y verifique que devuelva una cadena como '1 hour, 30 minutes, 15 seconds'.
Cree una segunda instancia con locale 'de' y estilo 'short'. Formatee la misma duración y verifique que la salida use abreviaturas alemanas como 'Std' y 'Min.' — confirmando el comportamiento adaptado a la locale.

FAQ

Preguntas sobre Generador Intl.DurationFormat

¿Qué campos de duración acepta Intl.DurationFormat?

Intl.DurationFormat acepta un objeto de duración con campos: years, months, weeks, days, hours, minutes, seconds, milliseconds, microseconds, nanoseconds. Solo incluya los campos que necesite: los campos omitidos no se muestran. El objeto puede mezclar unidades grandes y pequeñas (ej. horas y segundos sin minutos).

¿En qué se diferencia el estilo digital de long, short o narrow?

El estilo digital formatea la duración como una visualización de tiempo numérica como '1:30:00' (HH:MM:SS), similar a un reloj digital. El estilo long usa palabras completas ('1 hour, 30 minutes'), short usa formas abreviadas ('1 hr, 30 min') y narrow usa notación mínima ('1h 30m'). Cada locale define sus propias convenciones para cada estilo.

¿Soporta Intl.DurationFormat duraciones fraccionarias?

Los valores de duración pueden ser números fraccionarios o decimales, pero el comportamiento de formateo varía según la locale y el estilo. Las horas fraccionarias, por ejemplo, se formatean según las convenciones numéricas de la locale. Para un formateo preciso, redondee sus valores de duración a unidades enteras antes de pasarlos a la API.

Herramientas relacionadas