フォーム入力でテキストボックスなどへ日付項目を作成する際、ユーザに直接日付を入力してもらうのではかなり勝手が良くありません。
こういう場合は日付項目をクリックした時に「カレンダーダイアログ」を表示してあげるとユーザビリティが格段に向上します。
今回は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];      }    } }); });

実行サンプル

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