Das richtige Datum und die richtige Uhrzeit anzeigen

Ein Rahmen wird kurz vor der Anzeige vorbereitet. Damit Ihr Widget die richtige Uhrzeit zeigt, wird die Uhr auf den Moment vorgestellt, in dem die Anzeige auf Ihrem Rahmen erscheint. new Date() und Date.now() liefern Ihnen diesen Moment, ohne dass Sie sonst etwas tun müssen:

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>
  );
};

Übergeben Sie beim Formatieren einer Uhrzeit immer die Zeitzone des Rahmens, die Sie von useTimeZone bekommen. Der Browser, der Ihr Widget zeichnet, befindet sich nicht in der Zeitzone des Rahmens. getHours() oder Formatieren ohne timeZone ergibt auf dem Rahmen deshalb die falsche Stunde, selbst wenn sie in der Vorschau richtig aussieht.

Ein Rahmen, der für Mitternacht vorbereitet wird, zeigt Mitternacht, und „heute“ ist der Tag, an dem die Anzeige auf Ihrem Rahmen erscheint. In der Vorschau des Widget-Studios ist es einfach die aktuelle Uhrzeit.

new Date(...) mit einem Wert, etwa einem Datums-String, der geparst werden soll, funktioniert wie gewohnt.

Abgerufene Daten

Ihr Widget ruft seine Daten ab, wenn der Rahmen vorbereitet wird, also kurz vor der Anzeige. Meist macht das keinen Unterschied. Eine API, die Ihnen die Vorhersage für „heute“ liefert, ohne dass Sie den Tag nennen, gibt Ihnen aber bei einem Rahmen, der kurz vor Mitternacht vorbereitet wird, die Vorhersage für den Vortag.

Fragen Sie nach dem gewünschten Tag, oder suchen Sie ihn mit new Date() aus den Ergebnissen heraus:

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",
  );

  // Der Tag, an dem die Anzeige auf Ihrem Rahmen erscheint, geschrieben wie 2030-01-31, passend zu den Datumsangaben der 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>;
};

Die Hooks

Um die Uhrzeit zu lesen, brauchen Sie nie einen Hook. Zwei stehen aber bereit, wenn Sie es genau nehmen wollen:

• useScheduledDate liefert den Moment, in dem die Anzeige auf Ihrem Rahmen erscheint, wenn Ihr Code das ausdrücklich sagen soll.
• useRenderDate liefert die tatsächliche Uhrzeit, zu der Ihr Rahmen vorbereitet wird. Das brauchen Sie für die seltene API, die einen gesendeten Zeitstempel mit ihrer eigenen Uhr abgleicht, etwa bei einer signierten Anfrage.