ContactForm7で「日程選択」や「相談希望日」の入力欄を作るとき、 こんなことで困ったことはないですか？
- 土日祝日は受け付けていないのに、カレンダーでそのまま選べてしまう
- 年末年始やお盆休みの期間も除外したい
- でもプラグインは増やしたくない
ContactForm7の標準の日付フィールドだけでは、残念ながらこの細かな制御はできません。
↓
そこで使うのが、jQuery UIのDatepicker。
これを組み合わせることで、 土日・祝日・特定の休業日をまるごとグレーアウトして選択不可にできます。
この記事では、コピペで使えるコードと、各設定項目の解説をセットでお届けします。
実際にクライアントサイトで使っている構成ですので、動作確認済みです。
目次 非表示
完成イメージ
実装の流れ
STEP1：ヘッダーに必要スクリプトを読み込む
以下の4行を、ContactForm7を使っているページのヘッダーに追加します。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>ContactForm7のページにだけ読み込みたい場合は、 header.php内でif文を使って条件分岐するのがおすすめです。
【注意】WordPressはデフォルトでjQueryを読み込んでいるため、 jQueryを二重に読み込むと競合して動作しなくなる場合があります。 既存のheader.phpでどのスクリプトを読んでいるか確認した上で、 重複がないように配置してください。
Step2｜固定ページにDatepickerスクリプトを配置する
次に、以下のスクリプトを固定ページに埋め込みます。
カスタムHTMLブロックか、</body>直前に<script>タグで囲って配置してください。
<script>
jQuery.get('https://holidays-jp.github.io/api/v1/date.json', function (holidaysData) {
jQuery(function () {
var invalidDates = ['2026/12/29', '2026/12/30', '2026/12/31'];
$("#datepicker").datepicker({
minDate: 2,
maxDate: '+3M',
dateFormat: 'yy/mm/dd',
beforeShowDay: function (date) {
// 曜日コードを取得
var dayOfWeek = date.getDay();
// 土日を無効にする
if (dayOfWeek == 0 || dayOfWeek == 6) {
return [false, 'ui-state-disabled'];
}
// 祝日を無効にする
var holidays = Object.keys(holidaysData);
for (var i = 0; i < holidays.length; i++) {
var holiday = new Date(holidays[i] + 'T00:00:00');
if (
holiday.getFullYear() == date.getFullYear() &&
holiday.getMonth() == date.getMonth() &&
holiday.getDate() == date.getDate()
) {
return [false, 'ui-state-disabled'];
}
}
// 特定の日付を無効にする
var dateString = jQuery.datepicker.formatDate('yy/mm/dd', date);
if (jQuery.inArray(dateString, invalidDates) != -1) {
return [false, 'ui-state-disabled'];
}
// 有効な日付
return [true, 'day-weekday', null];
}
});
});
});
</script>各設定項目の詳細解説
以下は設定項目の解説です。
特定の休業日を指定する（invalidDates）
invalidDatesの配列に、休業日を ‘yyyy/mm/dd’ 形式で追加していきます。
祝日には含まれない年末年始・お盆・社内休業日などを入れておくのが主な使いどころです。
例）
var invalidDates = [
'2025/12/29', '2025/12/30', '2025/12/31', // 年末
'2026/01/02', '2026/01/03' // 年始
];除外する曜日を指定する（dayOfWeek）
dayOfWeekというところに曜日を示す数字を入れます。
曜日は数字で指定します。
現在、「土」「日」指定なので、コードを0と6にしています。
1＝月曜
2＝火曜
3＝水曜
4＝木曜
5＝金曜
6＝土曜
0＝日曜
土日を除外する場合（デフォルト）:
if (dayOfWeek == 0 || dayOfWeek == 6)
日曜だけ除外したい場合:
if (dayOfWeek == 0)
定休日が「水曜」の場合:
if (dayOfWeek == 3)選択できる最短日を設定する（minDate）
minDate:2は「今日から2日後以降を選択可能」という意味です。
注意点として、土日祝日も日数に含めてカウントされます。
「2営業日後から」にはなりませんので、余裕を持たせたい場合は 3〜5程度に設定しておくのがおすすめです。
選択できる最長日を設定する（maxDate）
「いつまで選択できるか」の設定もできます。
+3M → 3ヶ月後まで
+6M → 6ヶ月後まで
+1Y → 1年後まで
予約の混み具合に合わせて調整してください。
日本の祝日データについて
祝日の判定には Holidays JP API（https://holidays-jp.github.io/）を使っています。
外部APIのため、サービス側が更新を停止した場合は祝日の除外が機能しなくなる可能性があります。
その際の改修については、パリスタデザイン事務所までお気軽にご相談ください。無料でお見積もりいたします。
ContactForm7側の設定
CF7のフォーム編集画面で、日付フィールドに以下のタグを使います。
[text your-date id:datepicker readonly placeholder "クリックして日付を選択"]ポイントは id:datepicker の指定。
JavaScriptがこのIDを対象に動くため、ここが違うと動きません。
また、readonly をつけることで、カレンダー以外からの日付入力（手入力での書き換え）を防止しています。
よくある質問
- jQueryが競合して動かない
- WordPressはデフォルトでjQueryを読み込んでいます。header.phpでjQueryを 二重に記述している場合は片方を削除してください。SANGOなど一部テーマでは読み込み順の影響が出ることがあります。
- 祝日がグレーアウトされない
- Holidays JP APIへの接続に失敗している可能性があります。 ブラウザのコンソールでエラーが出ていないか確認してみてください。
- minDateで指定した日数より前が選べてしまう
- minDateは土日祝日も含めた暦の日数でカウントします。 営業日ベースで計算したい場合は、別途スクリプトの改修が必要です。
- スマホでカレンダーが表示されない
- jQueryUIのDatepickerはスマホ対応が弱い場合があります。
Flatpickrなど、モバイル向けのライブラリへの乗り換えも選択肢です。 （別記事で解説予定）
まとめ
今回ご紹介した実装は、実際のクライアント案件で稼働中の予約フォームで実際に採用している構成です。
プラグインを増やさず、コードを数十行追加するだけで実現できるのが最大のメリットです。
うまく動かない場合はよくある質問も参考にしてみてください。
関連する実装記事も合わせてどうぞ！
↓
【2026年版プラグイン不要】Contact Form 7に確認画面をつける方法｜カスタムJSで軽量実装【コピペOK】
【2026年版・コピペOK】ContactForm7で郵便番号から住所を自動入力する方法（function.php方式） 
