Bloom Skills スキルを咲かせるアウトプットブログ
  1. ホーム
  2. SWELL
  3. flatpickr導入ガイド｜日付入力をカレンダーUIにする方法【コピペでOK】

flatpickr導入ガイド｜日付入力をカレンダーUIにする方法【コピペでOK】

SWELL WordPress コーディング デザイン 初心者ガイド
CSS flatpickr HTML JavaScript カレンダー デザインのヒント 初心者向け
記事内にプロモーションを含む場合があります。
flatpickr導入ガイド｜日付入力をカレンダーUIにする方法【コピペでOK】

日付入力欄をカスタマイズしたくて、今回flatpickrを初めて導入してみました！

きっかけは、デザインカンプに合わせてフォームを作っていたとき。
カンプ上には表示されていない『年 / 月 / 日』のプレースホルダーが、実際のフォームでは表示されてしまっていて、
「これ、カンプ通りに仕上げるには消さないと…！」と思ったのが始まりでした。

これはContact Form 7の [date] タグを使ったときに、
ブラウザによって自動的に表示される『年 / 月 / 日』という文字。

シロくま

これ、色を透明にしても消えないし、どうしても気になる…

実はこの表示、ブラウザが自動的に出している 仮入力UI の一部で、
プレースホルダーのように見えても、通常のCSSではコントロールできない仕様みたいなんです。。。

初期状態では表示をなくしたいけど、ユーザーが日付を選んだらちゃんと反映されてほしい！
そんな理想を叶えるべく、、flatpickrを導入してみました◎

やりたいこと
  • 「年 / 月 / 日」の初期表示は非表示にしたい
  • ユーザーが日付を選んだら、それはちゃんと表示されてほしい

そこで今回、flatpickrの導入を試してみたところ、

  • カレンダーUIがついて見た目がグッとよくなる
  • 初期の「年 / 月 / 日」の表示を消せる
  • 選択後の日付はしっかり表示される

という理想的な状態が実現できました◎

この記事ではその中でも、 “日付欄をflatpickrでカスタマイズする部分だけ”に絞って紹介します！

今回の目的は、あくまでflatpickr導入方法。
実際に私が試してみて「これなら初心者でもコピペで使える！」と思ったので、
自分のフォームや仕事にそのまま活かせるような内容を目指しています◎

ありぃ

「見た目もちょっとおしゃれにしたい！」「コピペで再現したい」人にもおすすめ◎

ワンクリックで目的地へGO！

どんなときにカレンダーUIが必要？｜flatpickrが活躍するシーン

「カレンダーUIって、実際どんな場面で使うの？」と感じている方も多いかもしれません。私もそう思って調べてみました！

以下に、flatpickrが活躍するシーンをいくつかまとめてみました！
「どこで使えそうかな？」と想像しながら読んでみてください♡

シーン説明入力の特徴
🏪 来店予約美容室・ネイル・サロンなどで「来店日時を選んでもらう」未来日選択／時間もあるとベター
📅 イベント申込セミナーや体験会などで参加希望日を選ばせる特定の日だけ許可したいケースも
🚚 配送希望日ECサイトなどで「お届け希望日」を指定するフォーム翌日以降限定／時間帯指定併用もあり
🎂 生年月日入力会員登録や年齢制限ありのサービスでかなり過去の日付／月だけの選択も可
🧳 宿泊予約ホテル・民泊などで「チェックイン・アウト」を選ぶ連続選択・範囲選択が必要な場合も
🏥 クリニック予約病院・歯医者の診療予約休日除外などカレンダー制御が重要
📆 定期契約／開始日サービスの利用開始日（〇月〇日から）を選ばせる未来日中心／毎月1日だけ有効なども
📸 撮影・レンタル予約スタジオやレンタル品の利用希望日連続不可・特定日だけ開放の制限も

これからサイト制作を始める人にとっても、「あ、こういう場面で使えるんだ！」とイメージしながら読んでもらえると、flatpickrの便利さがより伝わるはずです◎

補足

flatpickrとは、日付入力欄をカレンダーUIに変えてくれる軽量なJavaScriptライブラリのこと。
フォームに簡単にカレンダーを表示できて、デザイン性も◎なんです！

flatpickrはJavaScriptで動作するカレンダーUIなので、 今回のようなContact Form 7のフォームに限らず、通常のHTMLフォームや他のフォームプラグインでも使えます。

また、テーマについてもSWELLに限らず、CocoonやLightningなど他のWordPressテーマでも同じように導入可能です。

この記事では「SWELL × Contact Form 7」でflatpickrを導入する流れをご紹介していますが、 構成が同じであれば他のサイトでも十分応用できます◎

今回のゴール

今回のゴールは以下の3つです。

  • Contact Form 7 の date フィールドに、flatpickrでカレンダーUIをつける
  • ブラウザデフォルトの「年 / 月 / 日」表示を非表示にする
  • シンプルなコードで、誰でもコピペで再現できるようにする

導入前の状態｜この「年 / 月 / 日」、消したくないですか？

まさに、これです……。
Contact Form 7 の [date] タグを使うと、**このように「年 / 月 / 日」**が自動で表示されてしまいます。

ですがこの状態、デザインカンプとは違っていてどうしても気になる……！
「CSSで透明にすればいい？」「placeholderを空にする？」など、いろいろ試してみたけれど、うまくいかず（泣）

こんなふうに「年 / 月 / 日」と表示されてしまいます……

クリックすればカレンダー自体は表示されますが、
ブラウザ任せのデフォルトUIなので、ちょっと見た目が味気ないというか……デザイン的にやや渋めな印象かも。

このように、Contact Form 7 の [date] タグではカレンダーは表示されるものの、

  • プレースホルダーの「年 / 月 / 日」が消せない（※ブラウザ依存）
  • デザインがブラウザ任せで整わない

といった問題がありました。

そこで今回、flatpickrを導入してみることに！
初心者の方でもコピペで再現できるように、できるだけシンプルな方法でまとめています◎

flatpickr 導入手順（WordPress × Contact Form 7）

ここでは、WordPressの 「SWELLテーマ × Contact Form 7」 環境で
flatpickrを導入する方法を紹介します！

私自身、SWELLテーマで実際に試してみましたが、
他のWordPressテーマ（CocoonやLightningなど）でも基本的な手順は同じです◎

  • コピペで再現できる
  • デフォルトの「年 / 月 / 日」プレースホルダーを非表示にする
  • カレンダーUIをflatpickrでおしゃれに表示
  • 選択した日付はしっかり表示される

① HTML｜Contact Form 7 のフォームに追記

フォーム編集画面で、以下のように記述します。

<label for="your-date">ご希望日</label>
<div class="date-wrapper">
  [date your-date id:your-date class:datepicker-field placeholder ""]
  <span class="calendar-icon" aria-hidden="true"></span>
</div>

.date-wrapper と .calendar-icon でカレンダーアイコンをレイアウト

placeholder "" は空白にすることで、ブラウザの「年 / 月 / 日」表示が出ても中身が空になるようにしています（CSSでコントロールできないため）

② CSS｜カレンダーUIを整える

フォームの見た目を整えるために、以下のCSSを追加します。

記述場所は次のいずれかでOKです◎

  • 「外観」→「カスタマイズ」→「追加CSS」に貼り付ける（おすすめ）
    　→ サイト全体にスタイルを適用したい場合はこちら。
  • 固定ページのカスタムCSSに記述する
    　→ この場合、そのページだけにスタイルが適用されます。
/* ▼日付フィールドを囲うラッパー */
.date-wrapper {
  position: relative;
  margin-bottom: 30px; //余白調整
}

/* ▼SVGカレンダーアイコン */
.calendar-icon {
  position: absolute;
  right: 12px;
  top: 50%; //上下の位置調整はここで調整
  transform: translateY(-50%);
  width: 24px; //アイコンサイズはここで調整
  height: 24px; //アイコンサイズはここで調整
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%238ccad7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 11H9V13H7V11ZM11 11H13V13H11V11ZM15 11H17V13H15V11ZM19 4H18V2H16V4H8V2H6V4H5C3.9 4 3 4.9 3 6V20C3 21.1 3.9 22 5 22H19C20.1 22 21 21.1 21 20V6C21 4.9 20.1 4 19 4ZM19 20H5V9H19V20ZM19 7H5V6H19V7Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

/* ▼入力欄に余白を追加してアイコンとかぶらないように */
input.datepicker-field {
  padding-right: 40px;
  background-color: #e6f7fa;
  border: 2px solid #8ccad7;
  border-radius: 5px;
  width: 100%;
  height: 50px;
  font-size: 16px;
  padding: 10px 15px;
  box-sizing: border-box;
  color: #333;
}
ありぃ

アイコンのサイズや位置調整はご自身の環境に合わせて微調整してみてくださいね！

③ functions.php｜flatpickrの読み込みと初期化

WordPress管理画面の「外観 → テーマファイルエディター」から、子テーマの functions.php に以下を追記します。

子テーマの functions.php に追記推奨（※親テーマは更新で消える可能性があるため）

// flatpickr & JSファイルの読み込み
function add_flatpickr_assets() {
  // flatpickr本体と日本語ロケール
  wp_enqueue_script('flatpickr', 'https://cdn.jsdelivr.net/npm/flatpickr', [], null, true);
  wp_enqueue_script('flatpickr-locale-ja', 'https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js', ['flatpickr'], null, true);
  wp_enqueue_style('flatpickr-style', 'https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css');

  // flatpickrの初期化（インラインJS）
  wp_add_inline_script('flatpickr-locale-ja', "
    document.addEventListener('DOMContentLoaded', function () {
      flatpickr(\"input[name='your-date']\", {
        locale: 'ja',
        dateFormat: 'Y-m-d'
      });
    });
  ");
}
add_action('wp_enqueue_scripts', 'add_flatpickr_assets');

dateFormat: 'Y-m-d' で送信フォーマットが整い、Contact Form 7 のバリデーションも通ります。

エラー防止Tips｜日付フォーマットの注意点

flatpickrで日付の表示形式を設定する際、
Contact Form 7 では Y-m-d（ハイフン区切り）であることが必須です。

Y/m/d にするとどうなるの？

私も最初に dateFormat: 'Y/m/d' を指定してしまったところ、
以下のようなエラーが表示されて送信できませんでした。

なぜエラーになるの？

Contact Form 7 の [date] タグは、
内部的に <input type="date"> として出力されるため、
ブラウザが受け付ける標準フォーマット「YYYY-MM-DD」＝ Y-m-d でないとバリデーションエラーが発生します。

安定動作のために

dateFormat: 'Y-m-d'

この指定を守ることで、送信時のエラーを回避できます！

④ 表示を確認！！

  • カレンダーUIがflatpickrに変わっているか
  • 「年 / 月 / 日」の初期プレースホルダーが消えているか
  • 日付選択後は正常に値が入るか
  • モバイルでもカレンダーが表示されるか

今回の方法でできたデザイン
　初期の状態で「年 / 月 / 日」は表示されていません！意図したデザインに近づけました！

　flatpickr のカレンダーUIもバッチリ反映されています♪

スマホで幅が狭くなる？iPhone表示が崩れるときの対処法

flatpickrはPCではきれいに表示されるのに、
自分のiPhoneで見ると日付入力欄だけ幅が狭くなってしまう…！というケースがありました。

注意点（スマホで崩れる？）

これは input[type="date"] が iOS の標準UIを使おうとするため、
指定したCSSがうまく反映されないのが原因です。

解決方法｜このCSSを追加すればOK！

input[type="date"],
input.datepicker-field,
input.flatpickr-input,
input.flatpickr-input.flatpickr-mobile {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 50px;
  font-size: 16px;
  padding: 10px 15px;
  box-sizing: border-box;
  border: 2px solid #8ccad7;
  border-radius: 5px;
  background-color: #e6f7fa;
  color: #333;
}

実際に私の環境（iPhone8／14 Pro）でも、このスタイル追加で幅の崩れが解消されました◎

おわりに｜カレンダーUIだけでも整える価値はある！

flatpickr初めて使ってみましたが、 意外とすんなり動いてくれて、ちょっと感動…

今回は、Contact Form 7の「日付入力欄」にflatpickrを導入する方法をご紹介しました。

一見、フォームの一部をカスタマイズしただけに見えるかもしれませんが、 日付の入力体験は、ユーザーにとって重要な接点のひとつ。
見た目も分かりやすく、直感的に使えるカレンダーUIに変わることで、 サイトの印象や操作性がぐっと良くなると実感しました。

しかも今回紹介した方法は、

  • どんなWordPressテーマでも使える
  • 他のフォームにも応用可能
  • コピペで導入しやすい

という点でも、初心者さんや実務でパーツ単位で整えたい方にぴったり◎

ありぃ

少しずつでも、自分でカスタムできるって楽しい！ そんな気持ちを大事にして、また次の記事も書いていきます♪

SWELL WordPress コーディング デザイン 初心者ガイド
CSS flatpickr HTML JavaScript カレンダー デザインのヒント 初心者向け
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

ワンクリックで目的地へGO！