Shadcn Time Picker

"use client"

import { useState } from "react"
import {
  TimePicker,
  TimePickerPanel,
} from "@/components/reui/time-picker"

import { Card } from "@/components/ui/card"

export function Pattern() {
  /* `HH:mm` in 24-hour time, or `null` once Clear empties it. Preselected
     so each column opens centered on its selected row. */
  const [value, setValue] = useState<string | null>("14:30")

  return (
    <div className="flex flex-col items-center gap-3">
      {/* `py-0` lets the panel sit flush, so it reads like the popover. */}
      <Card className="w-fit py-0">
        <TimePicker
          value={value}
          onValueChange={setValue}
          aria-label="Meeting time"
        >
          <TimePickerPanel />
        </TimePicker>
      </Card>
      <p role="status" className="text-muted-foreground text-sm">
        {value ? `Meeting at ${value}` : "No meeting time set"}
      </p>
    </div>
  )
}

import { TimePicker } from "@/components/reui/time-picker"

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"

export function Pattern() {
  return (
    <div className="w-full max-w-xs">
      <Field>
        <FieldLabel id="standup-time-label" htmlFor="standup-time">
          Standup time
        </FieldLabel>
        {/* With no children the picker renders its own trigger and popover.
            `aria-labelledby` keeps the value in the trigger's name, so it
            reads "Standup time 09:30" rather than the label alone. */}
        <TimePicker
          id="standup-time"
          aria-labelledby="standup-time-label"
          aria-describedby="standup-time-description"
        />
        <FieldDescription id="standup-time-description">
          Reminders go out 10 minutes before.
        </FieldDescription>
      </Field>
    </div>
  )
}

"use client"

import { useId, useState } from "react"
import {
  TimePicker,
  TimePickerContent,
  TimePickerInput,
} from "@/components/reui/time-picker"

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"

export function Pattern() {
  const id = useId()
  const [value, setValue] = useState<string | null>(null)

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <Field>
        {/* `htmlFor` alone is enough: the input speaks its own value. */}
        <FieldLabel htmlFor={id}>Pickup time</FieldLabel>
        <TimePicker
          id={id}
          minuteStep={5}
          value={value}
          onValueChange={setValue}
          aria-describedby={`${id}-description`}
        >
          {/* Typed text commits on blur or Enter; unreadable text reverts.
              The popover anchors on the clock button at the end of the
              field, so `align="end"` keeps it under the field. */}
          <TimePickerInput />
          <TimePickerContent align="end" />
        </TimePicker>
        <FieldDescription id={`${id}-description`}>
          Type 930, 14:30 or 2:30 pm. Times snap to 5 minutes.
        </FieldDescription>
      </Field>
      <p role="status" className="text-muted-foreground text-sm">
        {value ? `Pickup at ${value}` : "No pickup time yet"}
      </p>
    </div>
  )
}

import { TimePicker } from "@/components/reui/time-picker"

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"

export function Pattern() {
  return (
    <div className="w-full max-w-xs">
      <Field>
        <FieldLabel id="stream-live-label" htmlFor="stream-live">
          Stream goes live
        </FieldLabel>
        {/* Only the display is 12-hour: the trigger shows 02:45:30 PM while
            the value stays 24-hour `HH:mm:ss`, "14:45:30". The popover
            gets 4 columns, hour, minute, second and AM/PM. */}
        <TimePicker
          id="stream-live"
          hourCycle={12}
          granularity="second"
          defaultValue="14:45:30"
          aria-labelledby="stream-live-label"
          aria-describedby="stream-live-description"
        />
        <FieldDescription id="stream-live-description">
          Pick the exact second the broadcast starts.
        </FieldDescription>
      </Field>
    </div>
  )
}

import {
  TimePicker,
  TimePickerContent,
  TimePickerTrigger,
} from "@/components/reui/time-picker"

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"
import { MailIcon } from 'lucide-react'

export function Pattern() {
  return (
    <div className="w-full max-w-sm">
      <Item variant="outline">
        <ItemMedia variant="icon">
          <MailIcon  aria-hidden="true" />
        </ItemMedia>
        <ItemContent>
          <ItemTitle id="digest-time-title">Daily digest</ItemTitle>
          <ItemDescription id="digest-time-description">
            Mentions, replies and new tasks, once a day.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          {/* Hour granularity leaves 2 columns, hour and AM/PM, and every
              value lands on the hour ("09:00", "21:00"). The row title names
              the trigger, which adds its value: "Daily digest 09:00 AM". */}
          <TimePicker
            granularity="hour"
            hourCycle={12}
            defaultValue="09:00"
            aria-labelledby="digest-time-title"
            aria-describedby="digest-time-description"
          >
            <TimePickerTrigger size="sm" className="w-32" />
            {/* The trigger sits at the row's end, so `align="end"` keeps the
                popover under the row instead of hanging past its edge. */}
            <TimePickerContent align="end" />
          </TimePicker>
        </ItemActions>
      </Item>
    </div>
  )
}

import { TimePicker } from "@/components/reui/time-picker"

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"

export function Pattern() {
  return (
    <div className="w-full max-w-xs">
      <Field>
        <FieldLabel id="pickup-time-label" htmlFor="pickup-time">
          Pickup time
        </FieldLabel>
        {/* Hours outside the window are disabled. With no value the columns
            open on 08:30, the first time that can be chosen, and picking 08
            lands on 08:30 because 08:00 and 08:15 are before opening. */}
        <TimePicker
          id="pickup-time"
          minuteStep={15}
          min="08:30"
          max="17:30"
          aria-labelledby="pickup-time-label"
          aria-describedby="pickup-time-description"
        />
        <FieldDescription id="pickup-time-description">
          Open 08:30 to 17:30.
        </FieldDescription>
      </Field>
    </div>
  )
}

"use client"

import { TimePicker } from "@/components/reui/time-picker"

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"

const BOOKED = new Set(["10:00", "14:30", "15:00"])

/* Values arrive as `HH:mm`, so plain string comparison orders them. Module
   scope keeps the function stable, and a function prop is also why this file
   is a client module although it holds no state. */
function isUnavailable(value: string) {
  return (value >= "12:00" && value < "13:00") || BOOKED.has(value)
}

export function Pattern() {
  return (
    <div className="w-full max-w-xs">
      <Field>
        <FieldLabel id="appointment-time-label" htmlFor="appointment-time">
          Appointment
        </FieldLabel>
        {/* An hour with no free slot left is disabled whole, like 12. */}
        <TimePicker
          id="appointment-time"
          minuteStep={30}
          min="09:00"
          max="17:00"
          isTimeDisabled={isUnavailable}
          aria-labelledby="appointment-time-label"
          aria-describedby="appointment-time-description"
        />
        <FieldDescription id="appointment-time-description">
          Lunch from 12:00 to 13:00 and times already booked are unavailable.
        </FieldDescription>
      </Field>
    </div>
  )
}

"use client"

import { useId, useState } from "react"
import {
  formatTimeValue,
  parseTimeValue,
  TimePicker,
} from "@/components/reui/time-picker"

import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"

/* The range cannot cross midnight: the start stops at 23:30, so the shortest
   meeting still ends by 23:45, the last 15-minute slot of the day. */
const STEP = 15
const LATEST_END = 23 * 60 + 45

/* Minutes since midnight, both ways, through the picker's own value format. */
function toMinutes(value: string) {
  const time = parseTimeValue(value)
  return time ? time.hour * 60 + time.minute : 0
}

function fromMinutes(minutes: number) {
  return formatTimeValue({
    hour: Math.floor(minutes / 60),
    minute: minutes % 60,
    second: 0,
  })
}

/* Plain text rather than Intl, so the server and the browser agree. */
function formatDuration(minutes: number) {
  const hours = Math.floor(minutes / 60)
  const rest = minutes % 60
  if (hours === 0) return `${rest} min`
  return rest === 0 ? `${hours} h` : `${hours} h ${rest} min`
}

export function Pattern() {
  const id = useId()
  const [start, setStart] = useState<string | null>("09:00")
  const [end, setEnd] = useState<string | null>("10:00")

  const changeStart = (next: string | null) => {
    setStart(next)
    if (!next || !end) return
    /* The end moves by the same amount, so the meeting keeps its length.
       After a Clear there is no old start to shift from, so the end is only
       pushed past the new start when it would otherwise sit before it. */
    const shift = start ? toMinutes(next) - toMinutes(start) : 0
    const shifted = Math.max(toMinutes(end) + shift, toMinutes(next) + STEP)
    setEnd(fromMinutes(Math.min(shifted, LATEST_END)))
  }

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <FieldGroup className="grid grid-cols-2">
        <Field>
          <FieldLabel id={`${id}-start-label`} htmlFor={`${id}-start`}>
            Start
          </FieldLabel>
          <TimePicker
            id={`${id}-start`}
            minuteStep={STEP}
            max="23:30"
            value={start}
            onValueChange={changeStart}
            aria-labelledby={`${id}-start-label`}
          />
        </Field>
        <Field>
          <FieldLabel id={`${id}-end-label`} htmlFor={`${id}-end`}>
            End
          </FieldLabel>
          {/* A `min` that follows the start disables every earlier slot, so
              the duration can never reach zero or go negative. */}
          <TimePicker
            id={`${id}-end`}
            minuteStep={STEP}
            min={start ? fromMinutes(toMinutes(start) + STEP) : undefined}
            value={end}
            onValueChange={setEnd}
            aria-labelledby={`${id}-end-label`}
          />
        </Field>
      </FieldGroup>
      <p role="status" className="text-muted-foreground text-sm">
        {start && end
          ? `Duration: ${formatDuration(toMinutes(end) - toMinutes(start))}`
          : "Pick a start and an end time"}
      </p>
    </div>
  )
}

import {
  TimePicker,
  TimePickerClear,
  TimePickerColumns,
  TimePickerConfirm,
  TimePickerContent,
  TimePickerFooter,
  TimePickerTrigger,
  TimePickerValue,
} from "@/components/reui/time-picker"

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { ClockIcon } from 'lucide-react'

export function Pattern() {
  return (
    <div className="w-full max-w-xs">
      <Field>
        <FieldLabel id="doors-open-label" htmlFor="doors-open">
          Doors open
        </FieldLabel>
        {/* The zone is a fixed label, not a conversion: the value is the
            venue's wall-clock time. The label and the value name the trigger,
            so the zone joins them as its description. */}
        <TimePicker
          id="doors-open"
          defaultValue="19:30"
          aria-labelledby="doors-open-label"
          aria-describedby="doors-open-zone doors-open-description"
        >
          <TimePickerTrigger>
            <TimePickerValue />
            <span
              id="doors-open-zone"
              className="text-muted-foreground ms-auto"
            >
              Berlin time
            </span>
            {/* Children replace the default value and clock, so the clock is
                added back; `data-icon` keeps the button's end padding. */}
            <span
              data-icon="inline-end"
              aria-hidden="true"
              className="text-muted-foreground flex"
            >
              <ClockIcon  aria-hidden="true" />
            </span>
          </TimePickerTrigger>
          <TimePickerContent>
            <TimePickerColumns />
            {/* No Now: it would read the viewer's clock, not the venue's. */}
            <TimePickerFooter>
              <TimePickerClear />
              <TimePickerConfirm />
            </TimePickerFooter>
          </TimePickerContent>
        </TimePicker>
        <FieldDescription id="doors-open-description">
          Shown on every ticket in venue time, wherever the buyer is.
        </FieldDescription>
      </Field>
    </div>
  )
}

"use client"

import { useId, useState } from "react"
import { TimePicker } from "@/components/reui/time-picker"

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"

export function Pattern() {
  const id = useId()
  /* Only a committed value reaches this state. Column picks, Now and Clear
     stay a draft in the popover until OK, and closing it discards them, so
     the roster never sees a half-made change. */
  const [shiftStart, setShiftStart] = useState<string | null>("08:00")

  return (
    <div className="mx-auto flex w-full max-w-xs flex-col gap-3">
      <Field>
        <FieldLabel id={`${id}-label`} htmlFor={id}>
          Shift start
        </FieldLabel>
        <TimePicker
          id={id}
          aria-labelledby={`${id}-label`}
          aria-describedby={`${id}-hint`}
          value={shiftStart}
          onValueChange={setShiftStart}
          minuteStep={15}
          /* Also adds OK to the footer, drawn as the primary button. */
          requireConfirm
        />
        <FieldDescription id={`${id}-hint`}>
          Changes apply when you press OK.
        </FieldDescription>
      </Field>
      {/* Announced once per applied change, not on every pick in the
          columns. */}
      <p role="status" className="text-muted-foreground text-sm">
        {shiftStart ? `Shift starts at ${shiftStart}` : "No shift start set"}
      </p>
    </div>
  )
}

"use client"

import { useState } from "react"
import {
  TimePicker,
  TimePickerPanel,
  type TimePickerHourCycle,
  type TimePickerI18nOverrides,
  type TimePickerPeriodPosition,
} from "@/components/reui/time-picker"

import { Card } from "@/components/ui/card"
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs"

type PickerLocale = {
  lang: string
  name: string
  dir: "ltr" | "rtl"
  hourCycle: TimePickerHourCycle
  periodPosition?: TimePickerPeriodPosition
  i18n?: TimePickerI18nOverrides
}

const ARABIC_DIGITS = "٠١٢٣٤٥٦٧٨٩"

/* Module scope keeps each `i18n` object stable, so the picker merges it
   with the English defaults once, not on every render. English is the
   default config, so it passes none. */
const LOCALES: PickerLocale[] = [
  { lang: "en", name: "English", dir: "ltr", hourCycle: 12 },
  {
    lang: "de",
    name: "Deutsch",
    dir: "ltr",
    /* A 24-hour clock has no period column, so `period`, `am` and `pm` are
       left out. */
    hourCycle: 24,
    i18n: {
      labels: {
        placeholder: "Uhrzeit wählen",
        hour: "Stunde",
        minute: "Minute",
        second: "Sekunde",
        now: "Jetzt",
        clear: "Löschen",
        confirm: "OK",
        panelLabel: "Uhrzeit wählen",
        openPicker: "Zeitauswahl öffnen",
      },
    },
  },
  {
    lang: "zh",
    name: "中文",
    dir: "ltr",
    hourCycle: 12,
    /* 上午 and 下午 come before the time, so the period column leads. */
    periodPosition: "start",
    i18n: {
      labels: {
        placeholder: "选择时间",
        hour: "时",
        minute: "分",
        second: "秒",
        period: "上午/下午",
        am: "上午",
        pm: "下午",
        now: "现在",
        clear: "清除",
        confirm: "确定",
        panelLabel: "选择时间",
        openPicker: "打开时间选择器",
      },
    },
  },
  {
    lang: "ar",
    name: "العربية",
    dir: "rtl",
    hourCycle: 12,
    i18n: {
      labels: {
        placeholder: "اختر الوقت",
        hour: "الساعة",
        minute: "الدقيقة",
        second: "الثانية",
        period: "ص/م",
        am: "ص",
        pm: "م",
        now: "الآن",
        clear: "مسح",
        confirm: "تم",
        panelLabel: "اختر الوقت",
        openPicker: "فتح منتقي الوقت",
      },
      functions: {
        /* A string map rather than Intl, so the server and the browser print
           the same digits. Column typeahead accepts both digit sets. */
        formatSegment: (value) =>
          String(value)
            .padStart(2, "0")
            .replace(/\d/g, (digit) => ARABIC_DIGITS[Number(digit)]),
      },
    },
  },
]

export function Pattern() {
  /* One value for every tab: the language changes the labels and the
     clock, never the stored `HH:mm`. */
  const [value, setValue] = useState<string | null>("14:30")

  return (
    <div className="mx-auto flex w-full max-w-sm flex-col gap-3">
      <Tabs defaultValue="en">
        <TabsList>
          {/* Each tab names its language in that language; `lang` lets a
              screen reader pronounce it. */}
          {LOCALES.map((locale) => (
            <TabsTrigger
              key={locale.lang}
              value={locale.lang}
              lang={locale.lang}
            >
              {locale.name}
            </TabsTrigger>
          ))}
        </TabsList>
        {LOCALES.map((locale) => (
          <TabsContent key={locale.lang} value={locale.lang}>
            {/* Arabic mirrors the header and footer; the columns keep hour first. */}
            <div dir={locale.dir} lang={locale.lang}>
              <Card className="w-fit py-0">
                <TimePicker
                  value={value}
                  onValueChange={setValue}
                  hourCycle={locale.hourCycle}
                  periodPosition={locale.periodPosition}
                  i18n={locale.i18n}
                >
                  <TimePickerPanel />
                </TimePicker>
              </Card>
            </div>
          </TabsContent>
        ))}
      </Tabs>
      <p role="status" className="text-muted-foreground text-sm">
        {value ? `Stored as ${value} in every language` : "No time stored"}
      </p>
    </div>
  )
}

"use client"

import { useId, useState } from "react"
import { TimePicker } from "@/components/reui/time-picker"

import { Button } from "@/components/ui/button"
import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"

export function Pattern() {
  const id = useId()
  const [invalid, setInvalid] = useState(false)
  const [booked, setBooked] = useState<string | null>(null)

  return (
    /* `noValidate`: the Field draws the error, not the browser bubble. */
    <form
      noValidate
      className="mx-auto w-full max-w-sm"
      onSubmit={(event) => {
        event.preventDefault()
        /* The picker submits `HH:mm` under its `name`, or "" while empty. */
        const time = String(
          new FormData(event.currentTarget).get("deliveryTime") ?? ""
        )
        setInvalid(!time)
        setBooked(time || null)
      }}
      onReset={() => {
        /* The picker returns to its default (empty) on the same reset. */
        setInvalid(false)
        setBooked(null)
      }}
    >
      <FieldGroup>
        <Field data-invalid={invalid || undefined}>
          <FieldLabel id={`${id}-label`} htmlFor={id}>
            Delivery time
          </FieldLabel>
          <TimePicker
            id={id}
            name="deliveryTime"
            required
            /* Sets aria-invalid on the trigger; the Field colors the label. */
            invalid={invalid}
            minuteStep={30}
            min="08:00"
            max="20:00"
            aria-labelledby={`${id}-label`}
            aria-describedby={`${id}-hint`}
            onValueChange={(next) => {
              /* A pick clears the error; emptying the field waits for Submit. */
              if (next) setInvalid(false)
            }}
          />
          {/* One id for both, so aria-describedby follows whichever is shown. */}
          {invalid ? (
            <FieldError id={`${id}-hint`}>
              Choose a delivery time to continue.
            </FieldError>
          ) : (
            <FieldDescription id={`${id}-hint`}>
              30-minute slots between 08:00 and 20:00.
            </FieldDescription>
          )}
        </Field>
        <div className="flex items-center gap-2">
          <Button type="submit">Submit</Button>
          <Button type="reset" variant="outline">
            Reset
          </Button>
          <p
            role="status"
            className="text-muted-foreground ms-auto min-w-0 truncate text-sm"
          >
            {booked && `Delivery booked for ${booked}`}
          </p>
        </div>
      </FieldGroup>
    </form>
  )
}

"use client"

import { useState } from "react"
import {
  TimePicker,
  TimePickerColumns,
  TimePickerPanel,
} from "@/components/reui/time-picker"

import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

/* Plain arrays rather than Intl or toLocale*, so the server and the browser
   always print the same summary. */
const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
const MONTHS = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec",
]

/* Fixed dates, so the server and every visitor render the same month. */
const FIRST_MONTH = new Date(2026, 9, 1)
const SUGGESTED_DAY = new Date(2026, 9, 14)

export function Pattern() {
  const [date, setDate] = useState(SUGGESTED_DAY)
  const [time, setTime] = useState("09:00")
  const [scheduled, setScheduled] = useState<string | null>(null)

  const summary = `${WEEKDAYS[date.getDay()]}, ${MONTHS[date.getMonth()]} ${date.getDate()} at ${time}`
  /* Derived, so changing the day or the time after scheduling reads as a
     new, unsaved choice again. */
  const isScheduled = scheduled === summary

  return (
    <Card className="mx-auto w-fit max-w-full">
      <CardHeader>
        <CardTitle>Schedule a post</CardTitle>
        <CardDescription>
          Pick the day and the time it goes live.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-start">
          {/* `required` keeps one day selected, so the summary always has
              a date to show. */}
          <Calendar
            mode="single"
            required
            selected={date}
            onSelect={setDate}
            defaultMonth={FIRST_MONTH}
          />
          <div className="flex justify-center self-stretch max-sm:border-t max-sm:pt-4 sm:border-s sm:ps-4">
            <TimePicker
              aria-label="Publish time"
              value={time}
              onValueChange={(next) => {
                /* No footer means no Clear, so `next` is never null here. */
                if (next) setTime(next)
              }}
              minuteStep={15}
            >
              <TimePickerPanel className="[--time-picker-rows:7]">
                {/* No footer: Now would set the time but not the date. */}
                <TimePickerColumns />
              </TimePickerPanel>
            </TimePicker>
          </div>
        </div>
      </CardContent>
      <CardFooter>
        <p role="status" className="me-3 min-w-0 flex-1 text-sm">
          {isScheduled && (
            <span className="text-muted-foreground">Scheduled for </span>
          )}
          <span className="font-medium tabular-nums">{summary}</span>
        </p>
        <Button onClick={() => setScheduled(summary)}>Schedule</Button>
      </CardFooter>
    </Card>
  )
}