Reactで、Unix時間と日時を変換する入力欄を作る方法

// Unix時間と、datetime-local の値（ブラウザのタイムゾーンの日時）を変換する関数

export type Unit = 's' | 'ms';

// この部品で扱う年（1年〜9999年。日時の欄の max 属性に合わせる）に収まるか
const inRange = (date: Date) => date.getFullYear() >= 1 && date.getFullYear() <= 9999;

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

// Date を datetime-local に入れる文字列にする（toISOString は UTC なので使わない）
export function toLocalValue(date: Date, unit: Unit): string {
  const day = `${pad(date.getFullYear(), 4)}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
  let time = `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
  if (unit === 'ms') time += `.${pad(date.getMilliseconds(), 3)}`;
  return `${day}T${time}`;
}

// datetime-local の値を Date にする。日付と時刻の形で、時差を書かない文字列は
// その環境のタイムゾーンの日時として読まれる
export function fromLocalValue(value: string): Date | null {
  if (!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2}(\.\d{1,3})?)?$/.test(value)) return null;
  const date = new Date(value);
  return inRange(date) ? date : null;
}

export type UnixResult =
  | { kind: 'empty' }
  | { kind: 'ok'; date: Date; hint?: string }
  | { kind: 'error'; message: string };

// 入力欄の文字列を Unix時間として読む
export function parseUnix(text: string, unit: Unit): UnixResult {
  const s = text.normalize('NFKC').replace(/[\s,_]/g, '').replace(/^[−‐]/, '-');
  if (s === '') return { kind: 'empty' };
  if (!/^-?\d+$/.test(s)) return { kind: 'error', message: '整数で入力してください' };
  const date = new Date(Number(s) * (unit === 's' ? 1000 : 1));
  // いまの時刻は、秒なら10桁、ミリ秒なら13桁
  const digits = s.replace('-', '').length;
  const hint =
    unit === 's' && digits >= 12 ? 'ミリ秒の値かもしれません' :
    unit === 'ms' && digits <= 10 ? '秒の値かもしれません' : undefined;
  if (!inRange(date)) {
    const message = '1年から9999年までの日時になりません';
    return { kind: 'error', message: hint ? `${message}。${hint}` : message };
  }
  return { kind: 'ok', date, hint };
}

export function toUnixText(date: Date, unit: Unit): string {
  const ms = date.getTime();
  return String(unit === 's' ? Math.floor(ms / 1000) : ms);
}

// その日時での、UTC との時差（+09:00 など）
export function offsetText(date: Date): string {
  const m = -date.getTimezoneOffset();
  return `${m < 0 ? '-' : '+'}${pad(Math.floor(Math.abs(m) / 60))}:${pad(Math.abs(m) % 60)}`;
}

import { useId, useState } from 'react';
import { fromLocalValue, offsetText, parseUnix, toLocalValue, toUnixText, type Unit } from './unixtime';

const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

export function UnixTimeInput({ initial = Date.now() }: { initial?: number }) {
  const id = useId();
  const [unit, setUnit] = useState<Unit>('s');
  const [unixText, setUnixText] = useState(() => toUnixText(new Date(initial), 's'));
  const [localText, setLocalText] = useState(() => toLocalValue(new Date(initial), 's'));
  // 日時の欄が読めない（空になった）とき true
  const [localError, setLocalError] = useState(false);

  const unix = parseUnix(unixText, unit);
  // 両方の欄が正しく読めているときだけ、その日時を使う
  const date = !localError && unix.kind === 'ok' ? unix.date : null;

  function changeUnix(text: string) {
    setUnixText(text);
    setLocalError(false);
    const r = parseUnix(text, unit);
    if (r.kind === 'ok') setLocalText(toLocalValue(r.date, unit));
  }

  function changeLocal(value: string) {
    setLocalText(value);
    const d = fromLocalValue(value);
    setLocalError(d === null);
    if (d) setUnixText(toUnixText(d, unit));
  }

  function changeUnit(next: Unit) {
    setUnit(next);
    // 同じ瞬間のまま、表し方だけを変える
    if (date) {
      setUnixText(toUnixText(date, next));
      setLocalText(toLocalValue(date, next));
    }
  }

  function setNow() {
    const now = new Date();
    setUnixText(toUnixText(now, unit));
    setLocalText(toLocalValue(now, unit));
    setLocalError(false);
  }

  return (
    <div className="unixtime">
      <fieldset>
        <legend>単位</legend>
        <label><input type="radio" name={`${id}-unit`} checked={unit === 's'} onChange={() => changeUnit('s')} /> 秒</label>
        <label><input type="radio" name={`${id}-unit`} checked={unit === 'ms'} onChange={() => changeUnit('ms')} /> ミリ秒</label>
      </fieldset>

      <label htmlFor={`${id}-unix`}>Unix時間</label>
      <input
        id={`${id}-unix`}
        inputMode="numeric"
        value={unixText}
        aria-invalid={unix.kind === 'error'}
        aria-describedby={`${id}-unix-msg`}
        onChange={(e) => changeUnix(e.target.value)}
      />
      <p id={`${id}-unix-msg`} className={unix.kind === 'error' ? 'error' : 'hint'}>
        {unix.kind === 'error' ? unix.message : unix.kind === 'ok' ? unix.hint : ''}
      </p>

      <label htmlFor={`${id}-local`}>日時（{timeZone}）</label>
      <input
        id={`${id}-local`}
        type="datetime-local"
        step={unit === 's' ? 1 : 0.001}
        max="9999-12-31T23:59:59.999"
        value={localText}
        aria-invalid={localError && localText !== ''}
        onChange={(e) => changeLocal(e.target.value)}
      />

      <button type="button" onClick={setNow}>いまの時刻</button>

      <output htmlFor={`${id}-unix ${id}-local`}>
        {date ? `UTC：${date.toISOString()}（時差 ${offsetText(date)}）` : ''}
      </output>
    </div>
  );
}

.unixtime {
  display: grid;
  gap: 6px;
  max-width: 360px;
}
.unixtime fieldset {
  display: flex;
  gap: 16px;
  border: none;
  padding: 0;
}
.unixtime input:not([type='radio']) {
  font-size: 1.125rem;
  padding: 6px 8px;
}
.unixtime p {
  min-height: 1.5em;
  margin: 0;
}
.unixtime .error {
  color: #d85878;
}
.unixtime output {
  color: #067a98;
  font-family: monospace;
}