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.