Date time picker

import { DateTimePicker } from '@/ui/date-time-picker';
import { Field, FieldLabel } from '@/ui/field';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ui/select';

const lengths = { '15': '15 min', '30': '30 min', '45': '45 min', '60': '1 hour' };

// The meeting composer's When row. Today and now come from the agency's time zone.
export default function MeetingStart() {
  return (
    <Field className="w-fit">
      <FieldLabel id="meeting-when">When</FieldLabel>
      <DateTimePicker aria-labelledby="meeting-when" today="2026-10-16" now="14:10" defaultValue="2026-10-16T14:30">
        <Select items={lengths} defaultValue="30">
          <SelectTrigger aria-label="Length" className="w-28">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {Object.entries(lengths).map(([value, label]) => (
              <SelectItem key={value} value={value}>
                {label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </DateTimePicker>
    </Field>
  );
}

import { DatePicker } from '@/ui/date-picker';
import { Field, FieldDescription, FieldLabel } from '@/ui/field';

// Type "3 nov", "3/11" or "2026-11-03", or press Down for the calendar.
export default function StartDate() {
  return (
    <Field className="w-fit">
      <FieldLabel htmlFor="start-date">Start date</FieldLabel>
      <DatePicker id="start-date" label="Start date" today="2026-10-16" defaultValue="2026-11-03" aria-describedby="start-date-help" />
      <FieldDescription id="start-date-help">The candidate’s first day at Halcyon Bank.</FieldDescription>
    </Field>
  );
}

import { useState } from 'react';
import { localDay } from '@/lib/dates';
import { Calendar } from '@/ui/calendar';

// Decided 9: the picked day on the selected fill, today underlined in brand green, weeks from Monday.
export default function CalendarExample() {
  const [day, setDay] = useState<Date | undefined>(localDay('2026-11-03'));
  return <Calendar mode="single" selected={day} onSelect={setDay} today={localDay('2026-10-16')} defaultMonth={localDay('2026-11-03')} />;
}

import { DatePicker } from '@/ui/date-picker';
import { Field, FieldLabel } from '@/ui/field';
import { TimePicker } from '@/ui/time-picker';

export default function States() {
  return (
    <div className="flex flex-wrap items-start gap-200">
      <Field className="w-fit">
        <FieldLabel htmlFor="state-empty-day">Empty</FieldLabel>
        <DatePicker id="state-empty-day" label="Follow-up day" today="2026-10-16" />
      </Field>
      <Field className="w-fit">
        <FieldLabel htmlFor="state-min-day">From today</FieldLabel>
        <DatePicker id="state-min-day" label="Snooze until" today="2026-10-16" min="2026-10-17" defaultValue="2026-10-19" />
      </Field>
      <Field className="w-fit" disabled>
        <FieldLabel htmlFor="state-disabled-day">Disabled while saving</FieldLabel>
        <div className="flex gap-100">
          <DatePicker id="state-disabled-day" label="Day" today="2026-10-16" defaultValue="2026-10-16" disabled />
          <TimePicker label="Start time" defaultValue="14:30" disabled />
        </div>
      </Field>
    </div>
  );
}

import { useState } from 'react';
import { calendarDay } from '@/lib/dates';
import { DatePicker } from '@/ui/date-picker';
import { Field, FieldError, FieldLabel } from '@/ui/field';

// End before start is caught here, before submit, naming the other date. The database check stays as the backstop.
export default function RangeError() {
  const [start, setStart] = useState('2026-10-20');
  const [end, setEnd] = useState('2026-10-15');
  const backwards = start && end && end < start;
  return (
    <div className="flex flex-wrap items-start gap-200">
      <Field className="w-fit">
        <FieldLabel htmlFor="contract-start">Contract start</FieldLabel>
        <DatePicker id="contract-start" label="Contract start" today="2026-10-16" value={start} onValueChange={setStart} />
      </Field>
      <Field className="w-fit" invalid={!!backwards}>
        <FieldLabel htmlFor="contract-end">Contract end</FieldLabel>
        <DatePicker
          id="contract-end"
          label="Contract end"
          today="2026-10-16"
          value={end}
          onValueChange={setEnd}
          invalid={!!backwards}
          aria-describedby={backwards ? 'contract-end-error' : undefined}
        />
        <FieldError id="contract-end-error">{backwards ? `End date is before the start date (${calendarDay(start)}).` : null}</FieldError>
      </Field>
    </div>
  );
}

import { DatePicker } from '@/ui/date-picker';
import { Field, FieldLabel } from '@/ui/field';

// Allowed, but usually a typo: a year before 1900 or more than 50 years ahead asks before it is saved. Type a date that
// doesn't read, such as "31 Feb", and leave the field: it says how to fix it and keeps the last good day.
export default function Unusual() {
  return (
    <div className="flex flex-wrap items-start gap-200">
      <Field className="w-fit">
        <FieldLabel htmlFor="guarantee-end">Guarantee end</FieldLabel>
        <DatePicker id="guarantee-end" label="Guarantee end" today="2026-10-16" defaultValue="2091-01-01" />
      </Field>
      <Field className="w-fit">
        <FieldLabel htmlFor="interview-day">Interview day</FieldLabel>
        <DatePicker id="interview-day" label="Interview day" today="2026-10-16" defaultValue="2026-10-21" />
      </Field>
    </div>
  );
}