[WordPress] Contact Form 7の日付入力に範囲制限をかける方法｜min・max・todayの使い方

WordPressのフォームプラグイン 「Contact Form 7」 では、
「日付」項目を使って 来店日・予約日・生年月日 などをカレンダー形式で選択できます。

さらに、選択できる日付の範囲を制限することで、

• 過去の日付を選ばせない
• 予約可能な期間だけを指定する

といった制御が可能です。

この記事では、Contact Form 7の日付に範囲制限をかける方法を具体例付きで解説します。

基本の範囲指定（特定の期間を指定）

日付の範囲指定は、Contact Form 7 の標準機能で設定できます。

フォーム編集画面で、挿入したい位置にカーソルを合わせて 「日付」 をクリックします。

「範囲」の 下限（min） と 上限（max） を設定することで、
選択可能な日付の範囲を指定できます。

また、デフォルト値 を指定することも可能です。

設定例

• 期間：2026年2月1日 ～ 2月28日
• デフォルト値：2026年2月1日

この設定を行うと、以下のようなタグが挿入されます。

• min：選択可能な最小日
• max：選択可能な最大日
• デフォルト値：フォームを表示した時に、あらかじめ選択されている日付

表示例

デフォルトで 2月1日 が選択され、
2月1日〜2月28日の範囲のみ 選択できるようになります。

当日以降のみ選択可能にする（過去の日付を選択不可）

過去の日付を選択できないようにしたい場合は、min:today を指定します。

これにより、当日以前の日付は選択不可になります。

翌日以降のみ選択可能にする（即日予約を避ける）

即日予約を防ぎたい場合は、today に日数を加算します。

この設定では、翌日以降のみ選択可能になります。

7日後～1ヶ月後の範囲を指定する

「〇日後から〇ヶ月後まで」といった指定も可能です。

この例では、7日後から1ヶ月後まで の範囲で日付を選択できます。

注意点

• カレンダーの表示（スタイル）について
  Contact Form 7 の「日付」項目は <input type="date"> を使用しているため、カレンダーの見た目や操作方法は、使用しているブラウザやOSによって異なります。
• iPhone（iOS）の挙動について
  iOS端末では指定した範囲外の日付もできますが、範囲外の日付を選択すると「入力された日付が早すぎます。」「入力した日付が遅すぎます。」といったブラウザ標準のエラーメッセージが表示され、フォームは送信できません。