フォーム入力でテキストボックスなどへ日付項目を作成する際、ユーザに直接日付を入力してもらうのではかなり勝手が良くありません。
こういう場合は日付項目をクリックした時に「カレンダーダイアログ」を表示してあげるとユーザビリティが格段に向上します。
今回はjQueryプラグイン「Datepicker」を使用した「カレンダーダイアログ」の導入方法をご紹介致します。

導入手順

1. 1. プラグイン「Datepicker」のダウンロード
      • ダウンロード先：http://jqueryui.com/themeroller/
        
        メニュー「Themes」→サイドメニュー「Gallery」タブをクリックし、24種類のテーマ下にある「Download」ボタンをクリックします。
   2. カレンダー入力の導入で必要となるファイル
      • ダウンロードしたファイルの内、カレンダー表示に必要となるのは以下のファイルとなります。
        

        分類	ファイル名　or フォルダ名	パス	備考
        js	jquery.ui.core.min.js	jquery-ui-1.10.2.custom\\jquery-ui-1.10.2.custom\\development-bundle\\ui\\minified
        js	jquery.ui.datepicker.min.js	jquery-ui-1.10.2.custom\\jquery-ui-1.10.2.custom\\development-bundle\\ui\\minified
        js	jquery.ui.datepicker-ja.js	jquery-ui-1.10.2.custom\\jquery-ui-1.10.2.custom\\development-bundle\\ui\\minified\\i18n	日本語表示する際、必要になります。
        css、画像	dot-luv ※選択したテーマによりフォルダ名は変わります	jquery-ui-1.10.2.custom\\jquery-ui-1.10.2.custom\\development-bundle\\themes\\dot-luv

   3. ダウンロードしたファイルの読み込み設定
      
      XHTML

      <script src="./js/jquery-1.9.1.min.js"></script> <script src="./js/jquery.ui.core.min.js"></script> <script src="./js/jquery.ui.datepicker.min.js"></script> <script src="./js/jquery.ui.datepicker-ja.min.js"></script>

      1 2 3 4

      <script src="./js/jquery-1.9.1.min.js"></script> <script src="./js/jquery.ui.core.min.js"></script> <script src="./js/jquery.ui.datepicker.min.js"></script> <script src="./js/jquery.ui.datepicker-ja.min.js"></script>

      
      
      XHTML

      <link rel="stylesheet" type="text/css" href="./dot-luv/jquery.ui.all.css" />

      1	<link rel="stylesheet" type="text/css" href="./dot-luv/jquery.ui.all.css" />

      
      CSSファイルは「jquery.ui.all.css」を読み込むと全てのCSSファイルが読み込まれます。

1. HTMLに用意したテキストボックスやボタンへidかclassを設定し、jsファイルへ「datepicker」を実行するように記述すれば設定終了です。
   
   JavaScript

   $(function() { $( ".calendar" ).datepicker(); });

   1 2 3

   $(function() { $( ".calendar" ).datepicker(); });

カレンダーのサイズを変更したい場合

• カレンダーのサイズを変更したい時は、カレンダーのフォントサイズを以下の様に変更するとカレンダーサイズを変更出来ます。
  
  CSS

  /* カレンダーのサイズを変更 */ .ui-datepicker { font-size: 80%; }

  1 2 3 4

  /* カレンダーのサイズを変更 */ .ui-datepicker { font-size: 80%; }

カレンダーの土日の色を変更したい場合

• 通常ダウンロードしたままの状態では土日も平日と同じ色で表示されますが、CSSとjQueryへ以下の様に設定する事で土日日付の色を変更する事が出来ます。
  
  CSS

  /* カレンダーの日曜日の背景色を変える */ .ui-datepicker-sunday .ui-state-default { background-image:none; background-color: #9d0712; } /* カレンダーの土曜日の背景色を変える */ .ui-datepicker-saturday .ui-state-default { background-image:none; background-color: #06529d; }

  1 2 3 4 5 6 7 8 9 10 11

  /* カレンダーの日曜日の背景色を変える */ .ui-datepicker-sunday .ui-state-default {     background-image:none;     background-color: #9d0712; }   /* カレンダーの土曜日の背景色を変える */ .ui-datepicker-saturday .ui-state-default {     background-image:none;     background-color: #06529d; }

  
  
  JavaScript

  $(function() { $( ".calendar" ).datepicker({ beforeShowDay: function(date) { //日曜日 if(date.getDay() == 0) { return [true,"ui-datepicker-sunday"]; //土曜日 } else if(date.getDay() == 6){ return [true,"ui-datepicker-saturday"]; //平日 } else { return [true]; } } }); });

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  $(function() { $( ".calendar" ).datepicker({     beforeShowDay: function(date) {         //日曜日      if(date.getDay() == 0) {      return [true,"ui-datepicker-sunday"];     //土曜日      } else if(date.getDay() == 6){      return [true,"ui-datepicker-saturday"];     //平日      } else {      return [true];      }    } }); });

実行サンプル

• 上記設定を一通り設定すると以下の様な表示となります。
  日付項目：

補足：Datepickerを使う際の注意点と便利な設定

✅ バージョン互換性に注意

本記事では jQuery / jQuery UI を利用した例を紹介しましたが、
プロジェクト環境によっては jQuery のバージョンが固定されている場合があります。
使用中のテーマやプラグインと競合しないよう、バージョン互換性を確認して導入してください。

✅ モバイル端末を考慮する

スマートフォンでは <input type="date"> のネイティブUIが使えるため、
環境によっては ネイティブ日付入力の方が使いやすい ケースもあります。
必要に応じて、PCではDatepicker、モバイルではネイティブUI…と使い分けるのがおすすめです。

✅ よく使うオプション例

下記を追加することで、Datepickerがさらに便利になります。

年月プルダウンの表示

範囲指定（例：今日以降のみ選択可能）

範囲連動（開始日→終了日）

✅ altFormatで保存形式を変える例

表示は日本語、送信値はYYYY-MM-DDで持たせたい場合：

必要に応じて、祝日ハイライト機能や和暦対応、デザインカスタマイズの解説も追加できます。
実務でよく使うパターンについて知りたい場合は、コメント欄でお気軽にどうぞ！