Reactで、2つの日付の間の日数を数える方法

// input type="date" の value（"YYYY-MM-DD"）どうしの差を求める関数

const MS_PER_DAY = 86_400_000;
const hasTemporal = typeof Temporal !== 'undefined';

// Temporal がないブラウザ向け：1970-01-01 から何日目か（UTC で数える）
function utcDayNumber(value: string): number {
  const [y, m, d] = value.split('-').map(Number);
  const date = new Date(0);
  date.setUTCFullYear(y, m - 1, d); // Date.UTC だと 0〜99 年が 1900 年代になる
  return date.getTime() / MS_PER_DAY;
}

// end − start の日数。end のほうが前なら負の数になる。
// useTemporal は、2つの求め方を比べるための引数
export function diffDays(start: string, end: string, useTemporal = hasTemporal): number {
  if (useTemporal) {
    return Temporal.PlainDate.from(start).until(end).days;
  }
  return utcDayNumber(end) - utcDayNumber(start);
}

// 「何年何か月何日」。inclusive なら終了日の翌日までを数える。Temporal がないときは null
export function diffYmd(start: string, end: string, inclusive = false) {
  if (!hasTemporal) return null;
  const to = Temporal.PlainDate.from(end).add({ days: inclusive ? 1 : 0 });
  const d = Temporal.PlainDate.from(start).until(to, { largestUnit: 'years' });
  return { years: d.years, months: d.months, days: d.days };
}

// 曜日（0 = 日曜 … 6 = 土曜）
export function dayOfWeek(value: string): number {
  return new Date(utcDayNumber(value) * MS_PER_DAY).getUTCDay();
}

// firstDow の曜日から始まる length 日のうち、土日でない日の数
export function countWeekdays(firstDow: number, length: number): number {
  let count = Math.floor(length / 7) * 5;
  for (let i = 0; i < length % 7; i++) {
    const dow = (firstDow + i) % 7;
    if (dow !== 0 && dow !== 6) count++;
  }
  return count;
}

import { useId, useState } from 'react';
import { countWeekdays, dayOfWeek, diffDays, diffYmd } from './dateDiff';

type Props = { defaultStart?: string; defaultEnd?: string };

export function DayCounter({ defaultStart = '', defaultEnd = '' }: Props) {
  const id = useId();
  const [start, setStart] = useState(defaultStart);
  const [end, setEnd] = useState(defaultEnd);
  const [countFirstDay, setCountFirstDay] = useState(false);

  return (
    <div className="day-counter">
      <label htmlFor={`${id}-start`}>開始日</label>
      <input
        id={`${id}-start`}
        type="date"
        max="9999-12-31"
        value={start}
        onChange={(e) => setStart(e.target.value)}
      />
      <label htmlFor={`${id}-end`}>終了日</label>
      <input
        id={`${id}-end`}
        type="date"
        max="9999-12-31"
        value={end}
        onChange={(e) => setEnd(e.target.value)}
      />
      <label className="check">
        <input
          type="checkbox"
          checked={countFirstDay}
          onChange={(e) => setCountFirstDay(e.target.checked)}
        />
        開始日も1日目として数える
      </label>
      <output htmlFor={`${id}-start ${id}-end`} aria-live="polite">
        {start && end ? (
          <Result start={start} end={end} countFirstDay={countFirstDay} />
        ) : (
          <p>2つの日付を選んでください</p>
        )}
      </output>
    </div>
  );
}

function Result({ start, end, countFirstDay }: { start: string; end: string; countFirstDay: boolean }) {
  const signed = diffDays(start, end);
  // 終了日が前でも、数える範囲は「前の日付 → 後ろの日付」にそろえる
  const [from, to] = signed < 0 ? [end, start] : [start, end];
  const days = Math.abs(signed) + (countFirstDay ? 1 : 0);
  const firstDow = (dayOfWeek(from) + (countFirstDay ? 0 : 1)) % 7;
  const ymd = diffYmd(from, to, countFirstDay);

  return (
    <>
      <p className="days">
        <strong>{days.toLocaleString('ja-JP')}</strong> 日
      </p>
      {signed < 0 && <p>終了日のほうが前なので、入れ替えて数えています</p>}
      {ymd && (
        <p>
          {ymd.years > 0 && `${ymd.years}年`}
          {ymd.months > 0 && `${ymd.months}か月`}
          {(ymd.days > 0 || (ymd.years === 0 && ymd.months === 0)) && `${ymd.days}日`}
        </p>
      )}
      <p>土日を除くと {countWeekdays(firstDow, days).toLocaleString('ja-JP')} 日</p>
    </>
  );
}

.day-counter {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 12px;
  align-items: center;
  max-width: 360px;
}
.day-counter .check,
.day-counter output {
  grid-column: 1 / -1;
}
.day-counter output p {
  margin: 4px 0;
}
.day-counter .days strong {
  font-size: 2rem;
  color: #067a98;
}