〜三日後から選択可・火曜無効・日本語対応のカレンダーをflatpickrで実装しよう〜
Contact Form 7（CF7）で予約フォームや日程入力欄を設けるとき、
標準のdateフィールドでは「使いにくい」「見た目がさみしい」と感じたことはありませんか？
今回は、そんな悩みを解決してくれるJavaScript製のカレンダーUIライブラリ「flatpickr」を使って、
CF7のカレンダーを次のようにカスタマイズする方法をご紹介します。
- 🎌 カレンダーを日本語表記に
- ⛔ 火曜日を選べないようにする
- 📅 今日から数えて3日後以降のみ選択可能にする
初心者でもわかりやすいように、コードの貼り方や注意点も含めて解説していきます！
なぜflatpickrを使うのか？
Contact Form 7 の標準 date タグは、ブラウザ依存のため見た目や動作がばらつきます。
一方、flatpickrを使えば以下のような魅力があります。
- モバイルでも軽快に動作する
- 見た目がシンプルでスタイリッシュ
- 選択範囲や無効日など細かく制御できる
- 日本語化も簡単
完成イメージ
フォーム内の日付入力欄が以下のようになります
- 過去の日付は選べない
- 今日から数えて3日後しか選べない（例：今日が8/19なら、選べるのは8/22以降）
- 火曜日だけはカレンダー上で無効化
- 表示は「2025年8月22日」のように日本語表記
実装手順
flatpickr本体と日本語ロケールを読み込む
まず、WordPressテーマの footer.php またはカスタムJSファイルに以下のスクリプトを読み込みます。
<!-- flatpickr CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<!-- flatpickr JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<!-- 日本語ロケール -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>2. JavaScriptでカレンダーを初期化
次に、以下のJavaScriptを設置します。Contact Form 7の date フィールドに自動的に適用されます。
document.addEventListener('DOMContentLoaded', function() {
var Japanese = flatpickr.l10ns.ja;
var inputs = document.querySelectorAll('input.wpcf7-date');
inputs.forEach(function(input) {
flatpickr(input, {
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d",
locale: Japanese,
minDate: new Date().fp_incr(3), // 三日後から
disable: [
function(date) {
return (date.getDay() === 2); // 火曜（2）を無効にする
}
]
});
});
});コード解説
| パラメータ | 解説 |
|---|---|
altInput: true | 見た目を読みやすくする（例：「8月22日」） |
altFormat | 表示用の日付フォーマット |
dateFormat | 実際に送信されるフォーマット（”Y-m-d” 形式） |
locale | jaを指定することで日本語化 |
minDate | fp_incr(3)で今日から3日後に設定 |
disable | 無効な曜日（ここでは火曜）を関数で定義 |
よくある質問（FAQ）
Q. 火曜以外の曜日を無効にするには？
A. date.getDay() の戻り値を使って条件分岐できます。日曜（0）や土曜（6）も無効にしたい場合はこう書きます：
return (date.getDay() === 0 || date.getDay() === 6); // 土日を無効化Q. flatpickrが動作しない場合の原因は？
- flatpickr本体のJS/CSSが正しく読み込まれていない
- 日本語ロケールが読み込まれていない
.wpcf7-dateクラスの対象が存在しない（inputのtypeがdateになっているか確認）- DOMが動的に生成されるフォーム（マルチステップ形式など）では再初期化が必要
Q. Multi-Step Forms（複数ページ）との併用はできる？
A. 可能です。ただし、ステップ切り替え時にflatpickrが再読み込みされない場合があるため、以下のように wpcf7cf_step_show イベントで再初期化しておくと安心です。
document.addEventListener('wpcf7cf_step_show', function() {
document.querySelectorAll('input.wpcf7-date').forEach(function(input) {
if (!input._flatpickr) {
flatpickr(input, { ... }); // 上記と同じ設定
}
});
});まとめ
Contact Form 7 のフォームにおける日付入力欄を、
flatpickrで「三日後以降・火曜無効・日本語化」することで、より快適なユーザー体験を提供できます。
「いつから予約を受け付けるか？」「定休日はどう避けるか？」
といった運用ルールに応じて柔軟にカスタマイズできるのがflatpickrの魅力です。
ぜひ導入して、あなたのサイトのフォーム体験をアップデートしてみてください！