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

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

Download Builder | jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaS...

jqueryui.com

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

• 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」というテーマ。

日本語化用の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が提供しているデートピッカーが存在するようだったので、原因追究をやめてこれを試すことを優先する。詳細は後日メモに残す。