Angular ofereix un DatePipe que ens ajuda a mostrar dates i hores en diversos formats convertint el valor de data en brut en un format estructurat mitjançant expressions de plantilla. Com que cada projecte o cas d'ús pot requerir un format de data específic, aquest pipe proporciona la flexibilitat necessària per adaptar-se a aquestes necessitats sense esforç.
Sintaxi
{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}
El DatePipe s'executa només quan detecta un canvi pur en el valor d'entrada. Un canvi pur ocorre quan es modifica un valor primitiu o quan es canvia la referència de l'objecte. Modificar un objecte Date no activa el pipe per tornar a renderitzar. Per garantir l'execució del pipe, s'ha de crear un nou objecte Date.
Opcions predefinides de format a Angular
| Opció | Equivalent a | Exemples (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 |
Opcions de format personalitzades
També podem construir una cadena de format utilitzant símbols per definir els components d'una data-hora.
Implementació
En aquest article, creem un projecte simple amb un component anomenat date-pipe-example, implementem diversos formats de data i provem els canvis utilitzant les eines per a desenvolupadors de Google Chrome.
Proves en diferents zones horàries amb Chrome DevTools
Provar com es mostren les dates en diferents zones horàries i configuracions regionals és comú en el desenvolupament web. Per a això, podem aprofitar les eines de sensors de Chrome DevTools, que permeten simular ubicacions i configuracions de zona horària sense necessitat de canviar la configuració del sistema.
Conclusió
En aquest article analitzem el DatePipe d'Angular i la seva flexibilitat per formatar dates i hores. Construïm un component que mostra diferents formats i expliquem com utilitzar les eines per a desenvolupadors de Google Chrome per provar la visualització de dates en diferents condicions.
Per a projectes a gran escala que gestionen múltiples zones horàries i usuaris globals, és crucial gestionar correctament les dates i hores per a una experiència d'usuari fluida i fiable. Angular facilita aquesta tasca amb formats personalitzables i integració senzilla amb diferents configuracions regionals.
En Q2BSTUDIO, una empresa especialitzada en desenvolupament i serveis tecnològics, tenim l'experiència i el coneixement per implementar solucions eficients en aplicacions web i mòbils. Si busques optimitzar la gestió de dates en els teus projectes o necessites desenvolupament personalitzat, el nostre equip està llest per ajudar-te.
