jQueryUI の Datepicker によるカレンダー機能実装が簡単便利

今更ながらjQueryUIのDatepickerが簡単かつ便利だったので実装方法のメモを残す。

1.jQueryUIをダウンロードする

http://jqueryui.com/download/

最終的に必要なのは以下の４つなのでこれらが揃うように。

jquery-1.8.3.js

jquery-ui-1.9.2.custom.css

jquery-ui-1.9.2.custom.min.js

jquery.ui.datepicker-ja.js

cssに関しては、テーマを選んでダウンロードができる。個人的に気に入ったのは「flick」というテーマ。

f:id:kojikoji75:20130622215136j:plain

日本語化用のjquery.ui.datepicker-ja.jsは「i18n」フォルダの中にある。

2.任意の場所へ配置する

3.記述方法

(1) head内で呼び出す
　上記４つを読み込む。

(2) body内へ下記を記述

$(function() {
  $("#datepicker").datepicker();
  $("#datepicker").datepicker("option", "showOn", 'both');
});

日付: <input type="text" id="datepicker">

ちなみに以下のように細かい指定もできるとのこと。

$(function(){
  $("#datepicker").datepicker({
  showOn: 'button', // ボタンクリックでカレンダー表示
  autoSize: true, // のサイズ自動調整
  dateFormat: 'yy-mm-dd', // 日付フォーマット 例：2011-06-24
  numberOfMonths: [1,2], // ２ヶ月分を表示
  showButtonPanel: true, // カレンダーの下部にボタンパネル表示
  duration: 'slow', // 表示を遅く
  showAnim: 'fade', //fade アニメーションで表示
  maxDate: '+1y', // 最大1年先の日付が選択可能
  minDate: '-1y', // 過去1年まで日付が選択可能
  });
});

ただし、自分の環境では、bootstrapと併用した場合に限ってデザインが崩れてしまった。自分で深追いする前に、何か簡単な解決方法が存在しないかをとりあえず「bootstrap datepicker」等でググってみたところ、TwitterBootstrapが提供しているデートピッカーが存在するようだったので、原因追究をやめてこれを試すことを優先する。詳細は後日メモに残す。