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

スポンサーリンク

今更ながら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...

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

  • 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内で呼び出す
 上記4つを読み込む。

(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], // 2ヶ月分を表示
showButtonPanel: true, // カレンダーの下部にボタンパネル表示
duration: 'slow', // 表示を遅く
showAnim: 'fade', //fade アニメーションで表示
maxDate: '+1y', // 最大1年先の日付が選択可能
minDate: '-1y', // 過去1年まで日付が選択可能
});
});

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

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

jQuery UI+厳選プラグイン41 実践サンプル集

jQuery UI+厳選プラグイン41 実践サンプル集

タイトルとURLをコピーしました