MUI Autocomplete で Google Calendar ライクな サジェスト機能のついた時間入力フォームを作る

// 呼び出し
export default function Index() {
  const [timestamp, setTimestamp] = useState(new Date("2024/02/02 10:05").getTime());
  return (
    <TimeInput timestamp={timestamp} setTimestamp={setTimestamp} />
  );
}

import { format, setHours, setMinutes } from "date-fns";

// 秒、ミリ秒を丸める
function createTimestampAroundSecand(timestamp: number) {
  return timestamp - (timestamp % (1000 * 60));
}

// timestamp から "HH:mm" の形式を取得する
export function formatHHMM(timestamp: number) {
  return format(new Date(timestamp), "HH:mm");
}

// テキストから時間と分を取得する
export function separateHHMM(label: string) {
  const [hh = 0, mm = 0] = label.split(":").map((v) => Number(v.trim()));
  if (hh < 0 || hh >= 24) return null;
  if (mm < 0 || mm >= 60) return null;
  return { hh, mm };
}

// テキストを時間と分とみなして、新たな timestamp を作る
export function createTimestamp(timestamp: number, label: string): number {
  const sep = separateHHMM(label);
  if (!sep) return NaN;
  const { hh, mm } = sep;
  return setMinutes(
    setHours(new Date(createTimestampAroundSecand(timestamp)), hh),
    mm
  ).getTime();
}

import * as React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import { useEffect, useState } from "react";
import { Tooltip } from "@mui/material";
import { createTimestamp, formatHHMM, separateHHMM } from "./config";

const options = [...new Array(24 * 4)].map((_, i) => {
  const hh = Math.floor(i / 4);
  const mm = (i % 4) * 15;
  return `${String(hh).padStart(2, "0")}:${String(mm).padStart(2, "0")}`;
});

interface Props {
  setTimestamp: (timestamp: number) => void;
  timestamp: number;
}

export function TimeInput({ setTimestamp, timestamp }: Props) {
  const label = formatHHMM(timestamp);
  const [text, setText] = useState(label);
  const [invalid, setInvalid] = useState(false);
  useEffect(() => {
    setText(formatHHMM(timestamp));
  }, [timestamp]);

  return (
    <Tooltip title="無効な値です" open={invalid}>
      <Autocomplete
        disablePortal
        placeholder="hh:mm"
        id="time-input"
        options={options}
        freeSolo={true}
        filterOptions={(options, _state) => options}
        value={text}
        isOptionEqualToValue={(option, value) => {
          const o = separateHHMM(option);
          const v = separateHHMM(value);
          return o.hh === v.hh && v.mm - o.mm >= 0 && v.mm - o.mm < 15;
        }}
        onInputChange={(_, label) => {
          setText(label);
          setInvalid(false);
        }}
        onChange={(_, v) => {
          setInvalid(false);
          setText(v || "");
        }}
        onBlur={() => {
          setInvalid(false);
          if (!text) {
            // 元の表記に戻す
            setText(formatHHMM(timestamp));
            return;
          }
          const newTimestamp = createTimestamp(timestamp, text);
          if (isNaN(newTimestamp)) {
            setInvalid(true);
            return;
          }
          setText(formatHHMM(newTimestamp));
          setTimestamp(newTimestamp);
        }}
        renderInput={(params) => <TextField {...params} />}
      />
    </Tooltip>
  );
}

filterOptions={(options, _state) => options}

freeSolo={true}

value={text}
isOptionEqualToValue={(option, value) => {
  const o = separateHHMM(option);
  const v = separateHHMM(value);
  return o.hh === v.hh && v.mm - o.mm >= 0 && v.mm - o.mm < 15;
}}