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

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

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

必要ファイルの準備

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

• 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']; // 現状だと、火曜日が選択不可になる。第２引数はクラス名を指定できる
    }
  },
});

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