【Contact Form 7も対応】お問合せフォームの日付選択でjQuery Datetimepickerを使う方法

先日お問い合わせフォームの作成で、日付選択部分をカレンダーにしてほしいというオーダーがあったので、
jQueryで動作するDateTimePickerというプラグインを利用して実装しました。

日付だけでなく、何時何分のように時刻も合わせて選択できるので、使い勝手がいいのでオススメです。
備忘録も兼ねて実装方法をまとめました。

※2022年2月10日時点で、jQuery 3.6.0で動作確認してます。

必要ファイルの準備

まず下記3ファイルを用意します。

  • jquery.js
  • jquery.datetimepicker.full.min.js または jquery.datetimepicker.min.js
  • jquery.datetimepicker.min.css

jQueryはこちらから→https://jquery.com/download/
DateTimePickerプラグインはこちらから→https://github.com/xdan/datetimepicker

ダウンロードしたら、HTMLファイルに追加して、動作させられるようにしましょう。

読み込みから実行まで

<link rel="stylesheet" href="/css/jquery.datetimepicker.min.css">

<script src="/js/jquery-3.6.0.js"></script>
<script src="/js/jquery.datetimepicker.full.min.js"></script>

次に、inputタグを追加する。

<input type="text" id="datetimepicker1">

最後にjQueryで関数を実行する。

$(function () {
  $.datetimepicker.setLocale('ja'); // 日本語で動作するよう指定

  $('#datetimepicker1').datetimepicker();
});

これで動作するようになります!

よく使うオプションや注意点

他のオプションなど、詳しく知りたい方は、公式ドキュメントを御覧ください!
公式ドキュメントはこちら→https://xdsoft.net/jqplugins/datetimepicker/

$('#datetimepicker1').datetimepicker({
  format: 'Y/m/d', // 選択後のテキストの表示形式(時間を含める場合は、H:i で時:分と表示可能。)
  timepicker: true, // 日付のみのカレンダー表示
  datepicker: true, // 時刻のみのカレンダー表示
  minDate: '2022-02-10', // 選択できる初めの日付
  maxDate: '2022-12-31', // 選択できる最後の日付
  step: 30, // 時刻の何分刻みで選択できるようにするか
  allowTimes: ['10:00', '11:00', '12:00'], // 指定した時刻のみ表示
  disabledDates: ['2022/03/05'], // 指定した日付を選択不可にする(YYYY/MM/DDの形式にする必要あり)
  disabledWeekDays: [0, 6], // 指定した曜日(0:日曜〜6:土曜)を選択不可にする
  beforeShowDay: function (date) { // 公式ドキュメントにのってない(?)日付カレンダー表示時に、日にちの数だけ実行される関数
    if (date.getDay() === 2) {
      return [false, 'class-name']; // 現状だと、火曜日が選択不可になる。第2引数はクラス名を指定できる
    }
  },
});

注意点としては、formatを利用するときに、日本語(年月日)では指定できないので、日付を選択されたときに動く関数を利用する必要があります。

About Me

プロフィール画像

ユーキと申します。北海道恵庭市という札幌と新千歳空港の間でフリーランスのWebエンジニアとして活動してます。

当サイトのブログでは、主にWeb制作全般、フリーランス周りの情報など色々なノウハウや知識を載せています。
その他日々気になったこと、思ったことも書いてます。

お仕事の相談など何かありましたら、お問い合わせかツイッターのDMからお気軽にご連絡くださいませ。

お問い合わせはこちら

ツイッターはこちら

ポートフォリオはこちら

Latest Posts

Popular Posts

TOP