Calendar and dates

<Calendar
  month={month}
  focusedDate={focused}
  referenceDate="2026-10-24"
  selection={{ from: calendarDate, to: calendarDate }}
  onMonthChange={setMonth}
  onFocusedDateChange={setFocused}
  onSelect={setCalendarDate}
/>

<Legend
  label="Calendar legend"
  items={[
    { id: 'working', label: 'Working day', marker: 'outline' },
    {
      id: 'closed',
      label: 'Non-working',
      color: 'var(--rv-ui-text-muted)',
    },
    { id: 'exception', label: 'Exception', tone: 'selected' },
    { id: 'inherited', label: 'Inherited', marker: 'dashed' },
  ]}
/>

<CalendarPicker
  mode="range"
  selected={range}
  onSelectionChange={setRange}
  defaultMonth="2026-10-01"
  numberOfMonths={2}
  pagedNavigation
  min={2}
  max={14}
  excludeDisabled
  isDateDisabled={(date) => date === '2026-10-25'}
  referenceDate={reference}
/>
<p class="rv-form-description">
  2–14 nights. October 25 is unavailable.
</p>

<CalendarPicker
  mode="multiple"
  selected={multiple}
  onSelectionChange={setMultiple}
  defaultMonth="2026-10-01"
  required
  min={1}
  max={5}
  referenceDate={reference}
/>
<p class="rv-form-description">Choose up to five dates.</p>

<CalendarPicker
  selected={dropdown}
  onSelectionChange={setDropdown}
  defaultMonth="2026-10-01"
  captionLayout="dropdown"
  startMonth="2020-01-01"
  endMonth="2030-12-01"
  referenceDate={reference}
/>

<CalendarPicker
  selected={preset}
  onSelectionChange={(date) => {
    setPreset(date);
    setPresetError('');
  }}
  validateSelection={(date) =>
    date === '2026-10-25' ? 'Tomorrow is unavailable.' : true
  }
  onInvalidSelection={setPresetError}
  defaultMonth="2026-10-01"
  referenceDate={reference}
  presets={[
    { label: 'Today', selection: reference },
    { label: 'Tomorrow', selection: '2026-10-25' },
    { label: 'In a week', selection: '2026-10-31' },
  ]}
/>
{presetError ? <p role="status">{presetError}</p> : null}

<CalendarPicker
  selected={timed}
  onSelectionChange={setTimed}
  defaultMonth="2026-10-01"
  referenceDate={reference}
  footer={
    <div class="rv-form-grid">
      <label class="rv-field">
        <span class="rv-field__label">Start time</span>
        <DateTimeField
          kind="time"
          value={start}
          onValueChange={setStart}
          picker={{
            timeFormat: '24h',
            text: { chooseTime: 'Choose start time' },
          }}
        />
      </label>
      <label class="rv-field">
        <span class="rv-field__label">End time</span>
        <DateTimeField
          kind="time"
          value={end}
          onValueChange={setEnd}
          picker={{
            timeFormat: '24h',
            text: { chooseTime: 'Choose end time' },
          }}
        />
      </label>
    </div>
  }
/>

<CalendarPicker
  selected={booked}
  onSelectionChange={setBooked}
  defaultMonth="2026-10-01"
  referenceDate={reference}
  cellSize={40}
  isDateDisabled={(date) =>
    date >= '2026-10-12' && date <= '2026-10-15'
  }
  dayClassName={(date) =>
    date >= '2026-10-12' && date <= '2026-10-15'
      ? 'calendar-booked'
      : undefined
  }
  formatDayLabel={(date, locale) =>
    `${Number(date.slice(8, 10))} $100, ${new Intl.DateTimeFormat(locale, { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric', timeZone: 'UTC' }).format(parseIsoDate(date))}`
  }
  renderDay={(date) => (
    <span class="calendar-price">
      <span>{Number(date.slice(8, 10))}</span>
      <small> $100</small>
    </span>
  )}
/>

<CalendarPicker
  selected={weeks}
  onSelectionChange={setWeeks}
  defaultMonth="2026-10-01"
  showWeekNumber
  weekNumbering="iso"
  referenceDate={reference}
/>

<CalendarPicker
  selected={persian}
  onSelectionChange={setPersian}
  defaultMonth="2024-03-20"
  calendarSystem="persian"
  locale="fa-IR"
  dir="rtl"
  weekStartsOn={6}
  captionLayout="dropdown"
  startMonth="2023-03-21"
  endMonth="2027-03-20"
  translations={translations}
/>

<CalendarPicker
  selected={hijri}
  onSelectionChange={setHijri}
  defaultMonth="2026-10-24"
  calendarSystem="islamic-umalqura"
  locale="ar-SA"
  dir="rtl"
  weekStartsOn={0}
  captionLayout="dropdown"
  startMonth="2025-01-01"
  endMonth="2027-12-31"
  translations={{
    previousMonth: 'الشهر السابق',
    nextMonth: 'الشهر التالي',
    chooseMonth: 'اختر الشهر',
    chooseYear: 'اختر السنة',
    calendar: 'التقويم',
  }}
/>

<CalendarPicker
  selected={zone}
  onSelectionChange={setZone}
  defaultMonth="2026-10-01"
  referenceInstant={new Date('2026-10-24T00:30:00Z')}
  timeZone="America/Los_Angeles"
  showTodayButton
/>
<p class="rv-form-description">
  The reference instant is October 23 in Los Angeles. Selection remains
  an ISO date.
</p>

<CalendarPicker
  selected={natural}
  onSelectionChange={setNatural}
  defaultMonth="2021-02-01"
  fixedWeeks={false}
  showOutsideDays={false}
  disableNavigation
  captionLayout="dropdown"
  weekStartsOn={1}
/>

{renderTemporalValue(h, {
  values: ['Oct 12–17'],
  fullValue: 'Oct 12, 2026 – Oct 17, 2026',
})}
{renderTemporalValue(h, {
  values: ['Oct 12', 'Oct 15', 'Oct 20'],
  fullValue: 'Oct 12, 2026; Oct 15, 2026; Oct 20, 2026',
  multiple: true,
})}

<DateTimeField
  value={date}
  kind="datetime"
  onValueChange={setDate}
  picker={{
    timeFormat: '24h',
    calendar: { captionLayout: 'dropdown' },
  }}
/>

{assigneeOpen ? (
  <AssigneeField
    value={assignees}
    options={{
      source: [
        { value: 'ana', label: 'Ana', role: 'Engineer' },
        { value: 'bea', label: 'Bea', role: 'Designer' },
      ],
    }}
    save={(next) => {
      setAssignees(next);
      setAssigneeOpen(false);
    }}
    cancel={() => setAssigneeOpen(false)}
  />
) : (
  <Button onClick={() => setAssigneeOpen(true)}>Assign people</Button>
)}
<output>{JSON.stringify(assignees)}</output>

{lookupOpen ? (
  <LookupField
    initial={lookup}
    context={null}
    options={{
      dataSource: {
        search: async ({ query }) => ({
          items: [
            { value: 'launch', label: 'Launch' },
            { value: 'design', label: 'Design' },
          ].filter((option) =>
            option.label.toLowerCase().includes(query.toLowerCase()),
          ),
        }),
        resolve: async ({ ids }) =>
          ids.map((value) => ({ value, label: String(value) })),
      },
    }}
    apply={(next) => {
      setLookup(next);
      setLookupOpen(false);
    }}
    cancel={() => setLookupOpen(false)}
  />
) : (
  <Button onClick={() => setLookupOpen(true)}>
    Select linked record
  </Button>
)}
<output>{JSON.stringify(lookup)}</output>

<DurationField
  slider={{ max: 100, step: 0.25 }}
  unitButtons
  defaultUnit="day"
  value={duration}
  onChange={setDuration}
  allowElapsed
/>
<output>{JSON.stringify(duration)}</output>

<DatePicker
  label="Due date"
  openLabel="Choose due date"
  value={dueDate}
  onChange={(next) => {
    if (next) setDueDate(next);
  }}
/>
<DatePicker
  label="Second date"
  openLabel="Choose second date"
  value={secondDate}
  onChange={(next) => {
    if (next) setSecondDate(next);
  }}
/>

<DateTimeField
  aria-label="Date field"
  value={fieldDate}
  onValueChange={setFieldDate}
  picker={{ text: { chooseDate: 'Choose field date' } }}
/>
<DateTimeField
  aria-label="Time field"
  kind="time"
  value={fieldTime}
  onValueChange={setFieldTime}
  picker={{
    timeFormat: '24h',
    text: { chooseTime: 'Choose field time' },
  }}
/>
<DateTimeField
  aria-label="Date and time field"
  kind="datetime"
  value={fieldDateTime}
  onValueChange={setFieldDateTime}
  picker={{
    timeFormat: '24h',
    text: { chooseDate: 'Choose field date and time' },
  }}
/>

<div>
  Business hours
  <DateTimeField
    kind="time"
    aria-label="Business hours"
    value={appointment}
    onValueChange={setAppointment}
    picker={{
      timeFormat: '24h',
      minTime: '09:10',
      maxTime: '17:00',
      timeStep: 900,
      text: { chooseTime: 'Choose business time' },
    }}
  />
</div>
<small>09:10–17:00, in 15-minute intervals.</small>
<div>
  12-hour clock with seconds
  <DateTimeField
    kind="time"
    aria-label="Time with seconds"
    value={seconds}
    onValueChange={setSeconds}
    picker={{
      timeFormat: '12h',
      precision: 'second',
      calendar: { locale: 'en-US' },
      text: { chooseTime: 'Choose precise time' },
    }}
  />
</div>
<div>
  Explicit confirmation
  <DateTimeField
    kind="time"
    aria-label="Confirm time"
    value={confirmed}
    onValueChange={setConfirmed}
    picker={{
      timeFormat: '24h',
      autoApply: false,
      text: { chooseTime: 'Choose confirmed time' },
    }}
  />
</div>