【jQuery UI Datepicker】使い方まとめ（導入・日本語化・オプション）

Datepickerとは？

Datepickerは、入力フォームにカレンダーを表示できるjQuery UIの機能です。
日付入力を手入力ではなくクリックで選べるため、入力ミス防止に役立ちます。

---

導入方法

① 必要ファイルの読み込み

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- jQuery UI -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.2/themes/base/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.2/jquery-ui.min.js"></script>

→CSSを読み込まないとデザインが崩れます

② HTML

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

③ JavaScript

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

---

日本語化のやり方

方法①（おすすめ）：日本語ファイルを読み込む

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

→一括で日本語化できるので実務ではこちらが主流

方法②：オプションで個別指定

$('#datepicker').datepicker({
  monthNames: ["1月","2月","3月","4月","5月","6月",
               "7月","8月","9月","10月","11月","12月"],
  dayNamesMin: ["日","月","火","水","木","金","土"]
});

→細かく調整したい場合に使用

---

オプション一覧（よく使うもの）

オプション	内容	設定例
dateFormat	日付フォーマット	'yy/mm/dd'
changeMonth	月をプルダウンで変更	true
changeYear	年をプルダウンで変更	true
firstDay	曜日の開始位置	0:日曜 / 1:月曜
showButtonPanel	下部ボタン表示	true
minDate	最小日付	0（今日）
maxDate	最大日付	'+1M'（1ヶ月後）
altField	別フィールドに値出力	'#hidden'
altFormat	別フィールドの形式	'yy-mm-dd'
showAnim	表示アニメーション	'slideDown'
duration	アニメーション速度	300

---

オプションの書き方

$('#datepicker').datepicker({
  changeMonth: true,
  changeYear: true,
  showAnim: 'slideDown',
  duration: 300
});