来場予約など、フォームに日付入力欄を設置する場合、カレンダーで選択できると良いですよね。
今回は、そんなフォームに簡単にカレンダーを作成できるDatepickerを紹介します。

Datepickerとは？

jQuery UIのDatepickerはポップアップまたはインラインカレンダーから日付を選択でき、オプションによってカスタマイズをすることが出来ます。

Datepickerの使い方

まずjQuery UIを読み込みます。
ここではCDNを使います。

jQueryの読み込み
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
jQuery UIの読み込み
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
日本語版ファイルの読み込み
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

日付
<input type="text" id="calendar">

jQueryは下記の様に記載します。

$(function() {
  $('#calendar').datepicker();
});

オプションの追加

$(function() {
  $('#calendar').datepicker({
    changeYear: true,    // 年を表示
    changeMonth: true,   // 月を選択
    minDate: '1d', // 本日以前は選択不可
    maxDate: '+1y +6m',  // 1年半後まで選択可
  });
});

実装結果はこちらです。

その他できること

・アニメーション表示（スライドダウン、フェードインなど）
・他の月の日付も指定可能
・ボタンバーの表示
・インライン表示
・年・月をセレクト表示
・一度に複数月の表示
・日付のフォーマットの変更
・アイコントリガー
・ローカライズカレンダー
・別の入力欄と連携
・最小・最大日付の指定
・日付の範囲指定
・週の番号を表示

jQueryでのDatepickerについて解説しました。
使いやすく高機能なので、是非使ってみてください。

他にもあるよ。関連記事

• 【HTML】引用タグの使い方（blockquote、q、cite）
• HTMLで印刷ボタンを設置する方法
• 【CSS】要素の内側に線を引く方法（疑似要素after、outline-offset、box-sizing）