104Get started
HextaUI

useToday: Date bounds

Disable past days and anything more than 30 days out. Until today is known, nothing is disabled, so the server HTML matches the first client render.

October 2026
"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) }] : []}
    />
  )
}

Add this example

This adds the example as components/examples/use-today/bounds.tsx, together with the useToday component and the HextaUI theme tokens it needs.

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

To add only the component, follow the useToday installation.

Related components