useToday

La date du jour, qui change à minuit et au retour de l’onglet, sans désaccord d’hydratation.

"use client"

import { Skeleton } from "@/components/ui/skeleton"
import { useToday } from "@/hooks/use-today"

const formatter = new Intl.DateTimeFormat(undefined, { dateStyle: "full" })

function daysUntilNewYear(today: Date) {
  const next = new Date(today.getFullYear() + 1, 0, 1)
  return Math.round((next.getTime() - today.getTime()) / 86_400_000)
}

export function UseTodayDemo() {
  const today = useToday()

  return (
    <div className="flex flex-col items-center gap-1 text-center">
      {today ? (
        <>
          <p className="text-lg font-medium">{formatter.format(today)}</p>
          <p className="text-sm text-muted-foreground">
            {daysUntilNewYear(today)} days until New Year
          </p>
        </>
      ) : (
        <>
          <Skeleton className="h-6 w-56" />
          <Skeleton className="mt-1 h-4 w-36" />
        </>
      )}
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add https://hextaui.com/r/use-today.json

Ajoute le hook et tout ce dont il dépend à votre projet.

1
Copiez et collez le code suivant dans votre projet.
hooks/use-today.ts
import * as React from "react" function toDateKey(date: Date) { const month = String(date.getMonth() + 1).padStart(2, "0") const day = String(date.getDate()).padStart(2, "0") return `${date.getFullYear()}-${month}-${day}` }
Mettez à jour les chemins d’import selon la configuration de votre projet.

Utilisation

import { useToday } from "@/hooks/use-today"

const today = useToday()

if (!today) {
  return <Skeleton className="h-5 w-40" />
}

return <p>{format(today, "PPPP")}</p>

Utilisez-le dès qu'un composant dépend de la date courante, par exemple pour mettre en évidence aujourd'hui, désactiver les jours passés ou décompter jusqu'à une échéance.

Pourquoi pas new Date()

const today = new Date()

Lire la date pendant le rendu pose deux problèmes :

Désaccords d'hydratation. Le serveur rend dans son fuseau horaire, parfois avec des heures d'écart. Près de minuit, le serveur et le navigateur ne s'accordent pas sur le jour, et React jette le HTML du serveur.
Dates périmées. Un onglet laissé ouvert toute la nuit continue d'afficher hier comme aujourd'hui jusqu'à ce que quelque chose d'autre le re-rende.

useToday renvoie undefined côté serveur et pendant l'hydratation, puis la date locale. Il re-rend aussi à minuit et quand l'onglet redevient visible, car les minuteurs des onglets en arrière-plan peuvent être suspendus et manquer minuit.

Exemples

Bornes de dates

Désactive les jours passés et tout ce qui est à plus de 30 jours. Tant qu'aujourd'hui n'est pas connu, rien n'est désactivé, pour que le HTML du serveur corresponde au premier rendu client.

"use client"

import { addDays } from "date-fns"

import { Calendar } from "@/components/ui/calendar"
import { useToday } from "@/hooks/use-today"

export function UseTodayBounds() {
  const today = useToday()

  return (
    <Calendar
      mode="single"
      disabled={today ? [{ before: today }, { after: addDays(today, 30) }] : []}
    />
  )
}

Clés de date

import {
  fromDateKey,
  getTodayKey,
  subscribeToday,
  toDateKey,
} from "@/hooks/use-today"

toDateKey(new Date(2026, 9, 5))
fromDateKey("2026-10-05")

const unsubscribe = subscribeToday(() => refreshAgenda())

Le fichier exporte aussi les éléments dont le hook est construit. Les clés de date sont des chaînes locales YYYY-MM-DD. Elles se comparent par jour, se trient correctement et s'utilisent sans risque comme keys React ou clés de cache. subscribeToday vous rappelle à minuit et au retour sur l'onglet, en dehors de React.

Bon à savoir

Le Date renvoyé est minuit en heure locale : le comparer avec < ou > compare donc des jours, pas des heures.
Le même objet Date est renvoyé jusqu'au changement de jour, il peut donc servir sans risque dans les dépendances d'effets.
Prévoyez le rendu undefined. Un skeleton, ou un rendu sans limites liées à la date, conviennent tous deux.

Référence de l’API

useToday()

Valeur de retour	Description
`Date \| undefined`	Minuit local aujourd'hui. undefined côté serveur et pendant l'hydratation.

Utilitaires

Export	Description
`toDateKey(date)`	Un Date sous forme de chaîne YYYY-MM-DD locale.
`fromDateKey(key)`	Une chaîne YYYY-MM-DD sous forme de Date à minuit local.
`getTodayKey()`	La clé de date d'aujourd'hui.
`subscribeToday(callback)`	Rappelle à minuit et quand l'onglet redevient visible. Renvoie une fonction de désabonnement.

Utilisé par

Calendar, et Date picker par son intermédiaire.

CalendarUne grille de dates pour la sélection simple, de plage et multiple, avec des mois qui défilent, des aperçus de plage et des jours à taille tactile.