「jQuery UI DatePicker」でデイトピッカーを実装する方法

フォーム項目で「type="date"」をノーマルで使ってましたが、「もうちょっとええ感じのやつにして欲しい」と言われ、調べてみた結果よさげなものがあったのでご紹介。

いい感じにカレンダー上で選択できるような機能を実装できます。

jQuery UI DatePicker

ダウンロードしてもいいし、CDNでの読込もできるので便利です。

jQuery UI DatePicker

使い方は簡単。

いろんなカスタマイズもできます。下記はCDNで利用する場合の一例。

【html】

<!-- datepicker-js & css -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
<!-- datepicker-js -->
<script>
  $(function() {
    $('#datepicker').datepicker({
      minDate: '0d',
      dateFormat: 'yy-mm-dd',
    });
  });
</script>
 
<input type="text" name="hoge" id="datepicker">

上記の内容としては

「jQuery UI」のCSSの読込

「jQuery」の本体、「UI」のJavaScript

「DatePicker」の処理のスクリプト

ちなみに上記の例では

「当日以降しかクリックできない」という設定

「2020-01-01」の形でのフォーマット

というカスタムが入ってます。

カスタム例

テーマカラー選択

上記では「base」を例に書きましたが、他にもいろんなテーマが選べます。

こちらのページ、galleryタブを選択してプレビューが見れます。

例えば「UI lightness」を選びたい時には小文字でハイフン繋ぎにして「ui-lightness」の状態でcss読込をします。

例

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">

表記のフォーマット変更

<script>
$( function() {
  $( "#datepicker" ).datepicker({
    dateFormat: 'yy/mm/dd'
  });
} );
</script>

曜日の変更

日曜（0）始まりがデフォになってますが、これを月曜始まりにしたい場合は下記のように「1」を設定します。

<script>
$( function() {
  $( "#datepicker" ).datepicker({
    firstDay: 1
  });
} );
</script>

カレンダー自体の数を増やす

表示させるカレンダーを数か月先の分まで一気に表示

<script>
$( function() {
  $( "#datepicker" ).datepicker({
    numberOfMonths:3
  });
} );
</script>

前後の月の分も表示＆選択可能に

<script>
$( function() {
  $( "#datepicker" ).datepicker({
    showOtherMonths: true,
    selectOtherMonths: true
  });
} );
</script>

年月の指定をセレクトボックス（プルダウン）形式に

<script>
$( function() {
  $( "#datepicker" ).datepicker({
    changeYear: true,
    changeMonth: true
  });
} );
</script>

指定範囲縛り

現在の日付を基準に前後何日まで対象に含めるかを指定

<script>
$( function() {
  $( "#datepicker" ).datepicker({
    minDate: "-2d",
    maxDate: "+14d"
  });
} );
</script>

本日（TODAY）に戻るボタン、閉じるボタンを設置

<script>
$( function() {
  $( "#datepicker" ).datepicker({
    showButtonPanel: true,
    currentText: "本日",
    closeText: "クローズ"
  });
} );
</script>

複数のカレンダーを設置する場合の対処法

複数の使用をする場合は「#」（ID）ではなく「.」（class）で対応します。

<script>
$( function() {
  $( ".datepicker" ).datepicker();
} );
</script>
 
<input type="text" name="date1" class="datepicker">
<input type="text" name="date2" class="datepicker">

まとめ

ここまでいろんなカスタムができるのは大変助かりますね。

他にもたくさんのカスタム例がありますので公式でいろいろと調べてみてください。

メールフォーム等で日付の指定等が出てくる時に重宝するのではないかと思います。

では現場から以上です！