Reactで、時刻を選ぶ入力欄を作る方法

import { useId, useState } from 'react';

type Props = {
  label: string;
  name: string;
  min?: string; // "09:00" の形
  max?: string;
  stepMinutes?: number; // 何分単位で選ばせるか
  required?: boolean;
};

export function TimeInput({ label, name, min, max, stepMinutes = 1, required }: Props) {
  const id = useId();
  const [value, setValue] = useState('');
  const [error, setError] = useState('');

  function check(input: HTMLInputElement) {
    const v = input.validity;
    if (v.stepMismatch) return `${stepMinutes}分単位で選んでください`;
    if (v.rangeUnderflow || v.rangeOverflow) return `${min}〜${max}の間で選んでください`;
    return '';
  }

  return (
    <div className="time-field">
      <label htmlFor={id}>{label}</label>
      <input
        id={id}
        type="time"
        name={name}
        value={value}
        min={min}
        max={max}
        step={stepMinutes * 60}
        required={required}
        aria-describedby={`${id}-msg`}
        aria-invalid={error ? true : undefined}
        onChange={(e) => {
          setValue(e.target.value);
          setError(check(e.target));
        }}
      />
      <p id={`${id}-msg`} className={error ? 'error' : undefined}>
        {error || (value ? `${value} を選んでいます` : '未選択')}
      </p>
    </div>
  );
}

<TimeInput label="来店の時刻" name="visit" min="09:00" max="18:00" stepMinutes={15} required />

10:00 から: ArrowUp→10:15 ArrowUp→10:30 ArrowUp→10:45 ArrowUp→10:00 ArrowDown→10:45

<TimeInput label="夜間の配達" name="night" min="22:00" max="06:00" stepMinutes={30} />

// "HH:mm" の文字列を、0時からの分に直す
export function toMinutes(time: string): number {
  const [h, m] = time.split(':').map(Number);
  return h * 60 + m;
}

const pad = (n: number) => String(n).padStart(2, '0');

// min から max まで、stepMinutes ごとの時刻の一覧を作る。
// max が min より前なら、日付をまたぐ範囲（22:00〜06:00 など）として扱う
export function timeSlots(min: string, max: string, stepMinutes: number): string[] {
  const start = toMinutes(min);
  let end = toMinutes(max);
  if (end < start) end += 24 * 60;
  const slots: string[] = [];
  for (let t = start; t <= end; t += stepMinutes) {
    const m = t % (24 * 60);
    slots.push(`${pad(Math.floor(m / 60))}:${pad(m % 60)}`);
  }
  return slots;
}

timeSlots('09:00', '18:00', 15): 37 個 09:00 09:15 09:30 … 17:45 18:00
timeSlots('22:00', '06:00', 30): 22:00 22:30 23:00 23:30 00:00 00:30 01:00 01:30 02:00 02:30 03:00 03:30 04:00 04:30 05:00 05:30 06:00

import { useId, useMemo, useState } from 'react';
import { timeSlots } from './timeSlots';

type Props = {
  label: string;
  name: string;
  min: string;
  max: string;
  stepMinutes: number;
  required?: boolean;
};

export function TimeSelect({ label, name, min, max, stepMinutes, required }: Props) {
  const id = useId();
  const [value, setValue] = useState('');
  const slots = useMemo(() => timeSlots(min, max, stepMinutes), [min, max, stepMinutes]);

  return (
    <div className="time-field">
      <label htmlFor={id}>{label}</label>
      <select id={id} name={name} value={value} required={required} onChange={(e) => setValue(e.target.value)}>
        <option value="">選んでください</option>
        {slots.map((t) => (
          <option key={t} value={t}>
            {t}
          </option>
        ))}
      </select>
    </div>
  );
}