jQuery UI標準のカレンダーUI「datepicker」を使う

[Sponsored Link]


当ブログでは「役に立った!」「写真使いました!」などご参考頂いた方からのAmazonギフト券の寄付をお待ち致しております。

Share on FacebookTweet about this on TwitterShare on Google+Share on TumblrPin on PinterestShare on LinkedInDigg this

datepickerは、jQuery UIのUIセットに含まれる標準のカレンダー機能で、おそらくカレンダーUIとしてはもっとも使われているものの1つなのだと思う。なので世の中に多数の利用方法を解説したブログがあるだろうが、まあ自分メモ用として記録しておくことにした。

jQueryはGoogleのクラウドにあるものを直接URL指定で利用できるからダウンロードする必要はないが、jQuery UIはダウンロードして使用する必要がある。

■jQuery UI Download
http://jqueryui.com/download/

jQuery UIのダウンロード画面では、チェックボックスに任意のUIコンポーネントを選択することで最適化されたjsファイルとcssファイルをダウンロードできる。ただしCore(もしかさたらWidgetも)は必要なので、それはチェックをしておくこと。

さて、HTMLはこんな感じにしている。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="jquery-ui-1.10.3.custom.min.css" type="text/css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery-ui-1.10.3.custom.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<input type="text" id="date">
</body>
</html>

bodyは単にinputが1つあるだけ。これにidを付けてdatepickerの対象タグとしている。
そしてJavascriptは以下の通り。

$(window).load(function(){
        $('#date').datepicker({
                dateFormat: 'yy年mm月dd日',
                maxDate: '+6m',
                minDate: '+0d',
                dayNames: ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
                dayNamesMin: ["日", "月", "火", "水", "木", "金", "土"],
                dayNamesShort: ["日曜", "月曜", "火曜", "水曜", "木曜", "金曜", "土曜"],
                monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                nextText: "次",
                prefText: "前",
                changeYear: true,
                changeMonth: true,
        });
});

主要なポイントのみ。
dateFormatで、カレンダーから選択後のinputタグの年月日の書式をここで指定している。
maxDate、minDateは、選択できる年月日の範囲を指定するのに有効だ。たとえば旅館や旅程の空室・空席チェックなど、検索範囲がある程度限られる(たとえば3ヶ月以上先の予約はできない等)場合に有効な設定だ。ここでは最大6ヶ月(6m)先までの日付ピックが可能なように設定している。
changeYear、changeMonthをtrueに設定していると、それぞれ年と月が変更可能になる。falseにすると選択できなくなる。現在の年もしくは月の固定表示となる。

それ以外のところは日本語が書いてあるので、まあ意味がわかるだろう。

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」現場で役立つjQueryデザインパーツライブラリコアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)10日でおぼえる jQuery入門教室

Share on FacebookTweet about this on TwitterShare on Google+Share on TumblrPin on PinterestShare on LinkedInDigg this

当ブログでは「役に立った!」「写真使いました!」などご参考頂いた方からのAmazonギフト券の寄付をお待ち致しております。


Atsushi Ezura について

ナチュラルな女性のしぐさや表情を撮りたいIT系エンジニア。女性モデル募集中プロフィール
カテゴリー: JavaScript, jQuery, ウェブ, コンピュータ タグ: , , , パーマリンク

コメントを残す

メールアドレスが公開されることはありません。