DEV Community

frontendfacile.it
frontendfacile.it

Posted on Originally published at frontendfacile.it

Countdown per festività globali: smettere di lottare con Date e passare a Temporal

Per banner e contatori “fino a…” davvero internazionali, serve un modello di data/ora che conosca calendari e regole: JavaScript Date non basta.

Quando aggiungi un banner “Mancano X giorni a…” sembra un dettaglio UI. Finché non ti chiedono di supportare festività basate su calendari non gregoriani: ricorrenze lunari, calendari tradizionali, regole locali e (peggio) mesi intercalari. A quel punto, il classico approccio con Date e qualche sottrazione di millisecondi diventa un campo minato.

La buona notizia: oggi esiste un modello molto più adatto, pensato proprio per evitare calcoli manuali e ambiguità. Si chiama Temporal.

Perché Date porta a implementazioni fragili

Date è comodo per “adesso” e per timestamp, ma appena cerchi di modellare una data nel calendario di riferimento dell’evento, emergono problemi tipici:

  • Calcoli manuali: differenze tra date, arrotondamenti, gestione di ora locale vs UTC.
  • Confronti non affidabili: confrontare istanti nel tempo non è la stessa cosa che confrontare “date” in un calendario specifico.
  • Flessibilità limitata: l’implementazione tende a funzionare per un solo caso (es. una data fissa gregoriana), e si rompe quando cambi ricorrenza o regola.
  • Bug da calendario lunare: gestire a mano mesi lunari e mesi intercalari (leap month) è esattamente il tipo di logica che non vuoi mantenere in app.

In pratica, finisci a scrivere una piccola libreria di calendari senza volerlo.

Temporal: il cambio di paradigma giusto per festività “global”

Temporal introduce oggetti più precisi (e meno ambigui) per lavorare con date, orari, fusi e calendari.

Per un countdown verso una festività, l’idea è:

  1. Rappresentare la data target nel calendario corretto, invece di “forzarla” nel gregoriano.
  2. Lasciare al runtime la gestione della matematica complessa (inclusi mesi intercalari).
  3. Confrontare date nello stesso sistema (non sottrarre millisecondi a caso).

Un esempio tipico è una festività basata sul calendario cinese (come una ricorrenza lunare). Con Temporal puoi inizializzare una data con una proprietà calendar dedicata, così che l’interpretazione della data sia coerente con quel sistema.

Vantaggio concreto: niente bug da leap month shifting

Le festività lunari non sono “un giorno fisso” nel calendario gregoriano. Se provi a inseguirle convertendo tutto a mano, ti scontri con casi limite (in particolare i mesi intercalari). Temporal, invece, modella la data nel calendario d’origine e delega la complessità alla piattaforma: meno logica custom, meno sorprese in produzione.

Countdown robusto: confrontare date, non timestamp

Un errore comune nei banner di countdown è trattare tutto come differenza tra timestamp. Ma un countdown “umano” spesso deve ragionare in termini di date locali e calendario.

Con Temporal è buona pratica:

  • usare tipi come PlainDate/PlainDateTime per rappresentare “una data” indipendente dal fuso, quando ha senso;
  • usare metodi di comparazione tra date nello stesso calendario, invece di confronti manuali;
  • calcolare la durata con primitive di Temporal e poi renderizzarla come testo leggibile.

Questo porta a un codice più leggibile e, soprattutto, più corretto quando cambiano requisiti (nuove festività, nuove aree geografiche, nuove regole).

Durate “leggibili”: l’ultimo miglio del banner

Un countdown non è solo calcolo: è anche presentazione.

Una volta ottenuta la distanza dall’evento, conviene produrre output coerenti come:

  • “mancano 3 giorni”
  • “mancano 2 settimane e 1 giorno”
  • “inizia oggi”

Invece di concatenare stringhe a mano (con pluralizzazioni e arrotondamenti), conviene centralizzare la formattazione delle durate e mantenere un comportamento consistente in UI.

Un approccio pratico per un banner “global holidays ready”

Se devi implementare un banner di countdown che non si rompa al primo calendario non standard, la checklist utile è:

  1. Identifica il calendario dell’evento (gregoriano, cinese, ecc.).
  2. Rappresenta la data target con Temporal nel calendario corretto.
  3. Confronta e calcola usando le API di Temporal, evitando sottrazioni manuali.
  4. Formatta la durata in modo umano con una funzione dedicata (e testabile).
  5. Aggiungi test per casi limite (passaggi di mese, anno, e ricorrenze lunari).

Sintesi

Un countdown per festività globali non è un “semplice Date meno Date”: è un problema di calendari. Date ti spinge verso calcoli manuali e implementazioni rigide; Temporal ti permette di modellare correttamente date e confronti nel calendario giusto, riducendo i bug e rendendo il codice molto più estensibile.

Se il tuo prodotto esce dai confini del calendario gregoriano, la scelta più pragmatica è smettere di inseguire edge case a colpi di millisecondi e passare a un modello che li conosce già.


Articolo originale: https://frontendfacile.it/blog/countdown-per-festivita-globali-smettere-di-lottare-con-date-e-passare-a-tempora

Top comments (0)