Afficher la bonne date et la bonne heure

Les cadres sont préparés peu avant de s’afficher. Pour que votre widget montre la bonne heure, l’horloge est avancée jusqu’au moment où votre cadre s’affiche. new Date() et Date.now() vous donnent ce moment, sans rien d’autre à faire :

import { useTimeZone } from "~lib/use-time-zone";

export const Widget = () => {
  const timeZone = useTimeZone();

  return (
    <h1>
      {new Date().toLocaleTimeString(undefined, {
        timeZone,
        hour: "2-digit",
        minute: "2-digit",
      })}
    </h1>
  );
};

Passez toujours le fuseau horaire du cadre, obtenu avec useTimeZone, quand vous mettez une heure en forme. Le navigateur qui dessine votre widget ne se trouve pas dans le fuseau horaire du cadre : getHours(), ou une mise en forme sans timeZone, donne donc une mauvaise heure sur le cadre, même quand elle semble juste dans l’aperçu.

Un cadre préparé pour minuit affiche minuit, et « aujourd’hui » est le jour où votre cadre s’affiche. Dans l’aperçu du Studio de widgets, c’est simplement l’heure actuelle.

new Date(...) avec une valeur, comme une date à analyser à partir d’une chaîne, fonctionne normalement.

Les données que vous récupérez

Votre widget récupère ses données lorsque le cadre est préparé, un peu avant qu’il s’affiche. La plupart du temps, cela ne change rien, mais une API qui vous donne les prévisions « du jour » sans qu’on lui indique la date vous donne celles de la veille pour un cadre préparé juste avant minuit.

Demandez le jour que vous voulez, ou retrouvez-le dans les résultats à l’aide de new Date() :

import { useFetch } from "~lib/use-fetch";
import { useTimeZone } from "~lib/use-time-zone";

type Forecast = {
  readonly days: { readonly date: string; readonly high: number }[];
};

export const Widget = () => {
  const timeZone = useTimeZone();
  const { data } = useFetch<Forecast>(
    "https://api.example.com/forecast?days=2",
  );

  // Le jour où votre cadre s’affiche, écrit sous la forme 2030-01-31 comme les dates de l’API.
  const today = new Date().toLocaleDateString("en-CA", { timeZone });
  const forecast = data.days.find((day) => day.date === today) ?? data.days[0];

  return <h1>{forecast.high}°</h1>;
};

Les hooks

Vous n’avez jamais besoin d’un hook pour lire l’heure, mais deux sont là quand vous voulez être précis :

• useScheduledDate donne le moment où votre cadre s’affiche, pour quand vous voulez que votre code le dise explicitement.
• useRenderDate donne l’heure réelle à laquelle votre cadre est préparé, pour les rares API qui comparent un horodatage que vous envoyez à leur propre horloge, comme une requête signée.