Angular ofrece un DatePipe que nos ayuda a mostrar fechas y horas en varios formatos convirtiendo el valor de fecha en bruto en un formato estructurado mediante expresiones de plantilla. Debido a que cada proyecto o caso de uso puede requerir un formato de fecha específico, este pipe proporciona la flexibilidad necesaria para adaptarse a esas necesidades sin esfuerzo.
Sintaxis
{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}
El DatePipe se ejecuta solo cuando detecta un cambio puro en el valor de entrada. Un cambio puro ocurre cuando se modifica un valor primitivo o cuando se cambia la referencia del objeto. Modificar un objeto Date no activa el pipe para volver a renderizar. Para garantizar la ejecución del pipe, se debe crear un nuevo objeto Date.
Opciones predefinidas de formato en Angular
| Opción | Equivalente a | Ejemplos (en en-US) |
|----|----|----|
| 'short' | 'M/d/yy, h:mm a' | 6/15/15, 9:03 AM |
| 'medium' | 'MMM d, y, h:mm:ss a' | Jun 15, 2015, 9:03:01 AM |
| 'long' | 'MMMM d, y, h:mm:ss a z' | June 15, 2015 at 9:03:01 AM GMT+1 |
| 'full' | 'EEEE, MMMM d, y, h:mm:ss a zzzz' | Monday, June 15, 2015 at 9:03:01 AM GMT+01:00 |
| 'shortDate' | 'M/d/yy' | 6/15/15 |
| 'mediumDate' | 'MMM d, y' | Jun 15, 2015 |
| 'fullDate' | 'EEEE, MMMM d, y' | Monday, June 15, 2015 |
| 'shortTime' | 'h:mm a' | 9:03 AM |
| 'mediumTime' | 'h:mm:ss a' | 9:03:01 AM |
| 'longTime' | 'h:mm:ss a z' | 9:03:01 AM GMT+1 |
| 'fullTime' | 'h:mm:ss a zzzz' | 9:03:01 AM GMT+01:00 |
Opciones de formato personalizadas
También podemos construir una cadena de formato utilizando símbolos para definir los componentes de una fecha-hora.
Implementación
En este artículo, creamos un proyecto simple con un componente llamado date-pipe-example, implementamos varios formatos de fecha y probamos los cambios utilizando las herramientas para desarrolladores de Google Chrome.
Pruebas en diferentes zonas horarias con Chrome DevTools
Probar cómo se muestran las fechas en distintas zonas horarias y configuraciones regionales es común en el desarrollo web. Para esto, podemos aprovechar las herramientas de sensores de Chrome DevTools, que permiten simular ubicaciones y configuraciones de zona horaria sin necesidad de cambiar la configuración del sistema.
Conclusión
En este artículo analizamos el DatePipe de Angular y su flexibilidad para formatear fechas y horas. Construimos un componente que muestra distintos formatos y explicamos cómo utilizar las herramientas para desarrolladores de Google Chrome para probar la visualización de fechas en distintas condiciones.
Para proyectos a gran escala que manejan múltiples zonas horarias y usuarios globales, es crucial gestionar correctamente las fechas y horas para una experiencia de usuario fluida y confiable. Angular facilita esta tarea con formatos personalizables e integración sencilla con distintas configuraciones regionales.
En Q2BSTUDIO, una empresa especializada en desarrollo y servicios tecnológicos, tenemos la experiencia y el conocimiento para implementar soluciones eficientes en aplicaciones web y móviles. Si buscas optimizar la gestión de fechas en tus proyectos o necesitas desarrollo personalizado, nuestro equipo está listo para ayudarte.