Date Picker

1"use client";2​3import * as React from "react";4import { CalendarBlankIcon, CaretDownIcon } from "@phosphor-icons/react/ssr";5​6import { Calendar, type CalendarProps, type DateRange } from "@/components/ui/calendar";7import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";8import { cn } from "@/lib/utils";9​10// A date field (extrapolated from the Inkbox console, Figma 427:2715: the select trigger "Any State" and its menu11// panel). The trigger is the select's white 40px key with 8px corners and the Shadow/S ring: a 24px calendar glyph in12// the softer purple, the date in 14px ink (the placeholder in the light purple) and the bold caret at the right. The13// calendar opens under it in the popover's white panel, growing from the trigger. Presets sit in a column of 36px rows14// at the panel's left, the chosen one on the lilac. A single date closes the panel when picked; a range closes once both15// ends are set. Opening puts focus on the chosen day (or today), so the arrow keys work at once.16const TRIGGER =17  "flex h-10 w-full min-w-0 cursor-pointer items-center gap-2.5 rounded-control bg-surface pr-3 pl-3 font-sans text-body leading-tight whitespace-nowrap text-fg shadow-s outline-none transition-[box-shadow] duration-150 ease-out focus-visible:shadow-[var(--ds-shadow-s),var(--ds-shadow-focus)] disabled:cursor-not-allowed disabled:bg-subtle disabled:text-fg-muted aria-invalid:shadow-[0_0_0_1px_var(--ds-color-status-danger)] data-[empty=true]:text-fg-subtle motion-reduce:transition-none";18​19type Preset<T> = { label: string; value: T };20​21function formatDate(date: Date, locale?: string, options: Intl.DateTimeFormatOptions = { month: "short", day: "numeric", year: "numeric" }) {22  return new Intl.DateTimeFormat(locale, options).format(date);23}24​25function formatRange(range: DateRange | undefined, locale?: string) {26  if (!range?.from) return undefined;27  if (!range.to) return `${formatDate(range.from, locale)} -`;28  const sameYear = range.from.getFullYear() === range.to.getFullYear();29  return `${formatDate(range.from, locale, sameYear ? { month: "short", day: "numeric" } : undefined)} - ${formatDate(range.to, locale)}`;30}31​32function DatePickerTrigger({ empty, label, className, children, ...props }: React.ComponentProps<"button"> & { empty: boolean; label?: string }) {33  return (34    <PopoverTrigger asChild>35      <button type="button" data-slot="date-picker-trigger" data-empty={empty} aria-label={label} className={cn(TRIGGER, className)} {...props}>36        <CalendarBlankIcon aria-hidden weight="fill" className="size-6 shrink-0 text-icon-secondary" />37        <span className="min-w-0 flex-1 truncate text-left">{children}</span>38        <CaretDownIcon aria-hidden weight="bold" className="size-4 shrink-0 text-fg" />39      </button>40    </PopoverTrigger>41  );42}43​44function Presets<T>({ presets, isActive, onPick }: { presets: Preset<T>[]; isActive: (p: Preset<T>) => boolean; onPick: (value: T) => void }) {45  return (46    <div data-slot="date-picker-presets" role="group" aria-label="Presets" className="flex gap-1 overflow-x-auto border-line-subtle p-1 max-sm:border-b sm:w-40 sm:flex-col sm:border-r">47      {presets.map((p) => (48        <button49          key={p.label}50          type="button"51          aria-pressed={isActive(p)}52          onClick={() => onPick(p.value)}53          className="flex h-9 shrink-0 items-center rounded-control px-2.5 text-left font-sans text-body leading-tight whitespace-nowrap text-fg outline-none transition-colors duration-150 ease-out hover:bg-subtle focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring aria-pressed:bg-subtle aria-pressed:font-medium motion-reduce:transition-none"54        >55          {p.label}56        </button>57      ))}58    </div>59  );60}61​62const sameDay = (a?: Date, b?: Date) => !!a && !!b && a.toDateString() === b.toDateString();63​64type CalendarPassThrough = Omit<CalendarProps, "mode" | "selected" | "onSelect" | "required" | "min" | "max">;65​66type DatePickerProps = {67  value?: Date;68  defaultValue?: Date;69  onValueChange?: (date: Date | undefined) => void;70  placeholder?: string;71  disabled?: boolean;72  /** Shortcuts beside the calendar (Today, In a week). */73  presets?: Preset<Date>[];74  /** Props for the calendar inside (disabled days, the first day of the week, today). */75  calendar?: CalendarPassThrough;76  locale?: string;77  id?: string;78  name?: string;79  className?: string;80  "aria-invalid"?: boolean;81  "aria-label"?: string;82};83​84function DatePicker({ value: valueProp, defaultValue, onValueChange, placeholder = "Pick a date", disabled, presets, calendar, locale, id, name, className, ...aria }: DatePickerProps) {85  const [open, setOpen] = React.useState(false);86  const [inner, setInner] = React.useState(defaultValue);87  const value = valueProp !== undefined ? valueProp : inner;88  const set = (d: Date | undefined) => {89    if (valueProp === undefined) setInner(d);90    onValueChange?.(d);91  };92  return (93    <Popover open={open} onOpenChange={setOpen}>94      <DatePickerTrigger id={id} empty={!value} disabled={disabled} className={className} aria-invalid={aria["aria-invalid"]} label={aria["aria-label"]}>95        {value ? formatDate(value, locale) : placeholder}96      </DatePickerTrigger>97      {name && <input type="hidden" name={name} value={value ? value.toISOString().slice(0, 10) : ""} />}98      <PopoverContent data-slot="date-picker-content" align="start" onOpenAutoFocus={(e) => e.preventDefault()} className="w-auto gap-0 overflow-hidden p-0">99        <div className="flex flex-col sm:flex-row">100          {presets && (101            <Presets102              presets={presets}103              isActive={(p) => sameDay(p.value, value)}104              onPick={(d) => {105                set(d);106                setOpen(false);107              }}108            />109          )}110          <Calendar111            {...calendar}112            mode="single"113            selected={value}114            defaultMonth={value ?? calendar?.defaultMonth}115            locale={locale}116            autoFocus117            onSelect={(d) => {118              set(d);119              if (d) setOpen(false);120            }}121          />122        </div>123      </PopoverContent>124    </Popover>125  );126}127​128type DateRangePickerProps = Omit<DatePickerProps, "value" | "defaultValue" | "onValueChange" | "presets"> & {129  value?: DateRange;130  defaultValue?: DateRange;131  onValueChange?: (range: DateRange | undefined) => void;132  presets?: Preset<DateRange>[];133  /** How many months show side by side (two by default; one on a phone). */134  numberOfMonths?: number;135};136​137function DateRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder = "Pick a date range", disabled, presets, calendar, locale, numberOfMonths = 2, id, name, className, ...aria }: DateRangePickerProps) {138  const [open, setOpen] = React.useState(false);139  const [inner, setInner] = React.useState(defaultValue);140  const value = valueProp !== undefined ? valueProp : inner;141  const set = (r: DateRange | undefined) => {142    if (valueProp === undefined) setInner(r);143    onValueChange?.(r);144  };145  const [narrow, setNarrow] = React.useState(false);146  React.useEffect(() => {147    const query = window.matchMedia("(max-width: 39.99rem)");148    const update = () => setNarrow(query.matches);149    update();150    query.addEventListener("change", update);151    return () => query.removeEventListener("change", update);152  }, []);153  const label = formatRange(value, locale);154  return (155    <Popover open={open} onOpenChange={setOpen}>156      <DatePickerTrigger id={id} empty={!label} disabled={disabled} className={className} aria-invalid={aria["aria-invalid"]} label={aria["aria-label"]}>157        {label ?? placeholder}158      </DatePickerTrigger>159      {name && (160        <>161          <input type="hidden" name={`${name}From`} value={value?.from ? value.from.toISOString().slice(0, 10) : ""} />162          <input type="hidden" name={`${name}To`} value={value?.to ? value.to.toISOString().slice(0, 10) : ""} />163        </>164      )}165      <PopoverContent data-slot="date-range-picker-content" align="start" onOpenAutoFocus={(e) => e.preventDefault()} className="w-auto max-w-[calc(100vw-2rem)] gap-0 overflow-hidden p-0">166        <div className="flex flex-col sm:flex-row">167          {presets && (168            <Presets169              presets={presets}170              isActive={(p) => sameDay(p.value.from, value?.from) && sameDay(p.value.to, value?.to)}171              onPick={(r) => {172                set(r);173                setOpen(false);174              }}175            />176          )}177          <Calendar178            {...calendar}179            mode="range"180            selected={value}181            defaultMonth={value?.from ?? calendar?.defaultMonth}182            numberOfMonths={narrow ? 1 : numberOfMonths}183            locale={locale}184            autoFocus185            onSelect={(r) => {186              set(r);187              if (r?.from && r.to) setOpen(false);188            }}189          />190        </div>191      </PopoverContent>192    </Popover>193  );194}195​196export { DatePicker, DateRangePicker, formatDate, formatRange };197export type { DatePickerProps, DateRangePickerProps };