【JavaScript】過去の日付を選べない日付フォームを作る

実装方法

日付フォームで特定の日付より前の日付を選べないようにしたい場合、
min属性を付与するだけで簡単にできます。

<input type="date" min="2025-02-10" />

なので、min属性に今日の日付を付与するだけで、
過去の日付が選べない日付フォームが出来上がります。

sampleForm.ts

export default function App() {
  const getToday = () => {
    return new Date().toISOString().split("T")[0];
  }
  return (
    <div>
      <form>
        <input type="date" min={getToday()} />
        <button type="submit">ボタン</button>
      </form>
    </div>
  )
}

Code Sandbox

フォーム自体はこんな感じになります。

カレンダー選択でなくキーボード入力をすると、
過去の日付が選べてしまいますが、バリデーションで引っかかります。