jQuery UIのDatepickerでカレンダーから楽々日付入力
フォーム入力で日付を扱うことあると思いますが、数字だけの割にはいろいろと制御が面倒な部分でもあります。
入力フォーマット、年・月・日の制御など、作る側としてはかなり見えない部分の仕事が増えます。
入力するユーザの立場としても、フォームがドーンとあっただけでは入力に迷いますし、こういう局面ではカレンダーなどで曜日や日にち間隔を確認しますよね。
この両者の不便さを解消する方法として、jQueryのプラグインである「jQuery UI」の１機能、「Datepicker」で解消できます。
Datepickerを使用することで、フォームへの日付入力の際、カレンダーを表示して入力補助をするインターフェースを、簡単に実装できます。
jQueryを用意する
jQuery UIはjQueryのプラグインであるため、jQuery本体が必要となります。
jQuery本体の準備は以前「「CrossSlide」写真や画像をかっこよくスライド表示 」の「jQueryを用意する」で書きましたので、そこを参照してください。
結果的には、使用するページのheadタグの間に、下記コードを追加します。
便利なGoogle様に感謝です。(笑)
jQuery UIのDatepickerを用意する
jQuery UIですが、配布元である「jQuery UI」へ行き、トップページにある「Download」リンクからダウンロードします。
…と言いたいところですが。
天下のgoogle様が共通利用できるライブラリとして提供しているので、それを利用した方が便利です。
この流れは以前も使いましたね。(笑)
使用するページのheadタグの間に、下記コードを追加するだけでOKです。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
これでgoogleのサーバ上からjQuery UIを読み込みますので、若干ですがサーバの転送量を減らせます。
jQuery UIのデザインを決める
jQuery UIは、おしゃれなデザインがいくつか用意されています。
今見たところ、２４種類ほどのテーマがありますね。
テーマは上記リンクより行けるページの、「Gallery」タブを押すことで見ることができます。
本来であれば「Download」ボタンを押してCSSをダウンロードし、使用するサーバへ格納するのですが、ここでまたまたGoogle様のご登場です。
これでgoogleのサーバ上からCSSを読み込めます。
２４種類もあるテーマの選択方法ですが、赤字の部分を適用したいテーマ名(上の画像の赤丸部分)に変えるだけです。
オレンジが基調のUI lightnessであれば「ui-lightness」と書きます。
注意点としては、サイト上はテーマ名を大文字混じりで書かれていますが、ソース上は全て小文字で書きます。
またスペースの入っているテーマ名は、スペース部分を「-」に置き換えます。
jQuery UIのDatepickerの使用方法
jQuery UIのDatepickerの一番簡単な使い方です。
まずはカレンダーインターフェースを適用したいフォームに、idで任意の名前を付けます。
続いて設定部分を入れます。
設定はJavaScriptで行い、記述場所はbodyタグの間にあればどこでも構いません。
$(function(){
$("#datepicker").datepicker();
});
</script>
赤字の部分は、Datepickerにカレンダーの表示場所を教えています。
つまり前述したinputタグのid値(赤字部分)と、同じ文字列を入れるのです。
jQuery UIのDatepickerには多数のパラメータが用意されており、それを１つ１つ説明するのはさすがに無理があるため割愛します。
公式サイトの「Datepicker Demos & Documentation」にパラメータ一覧と詳細が纏められていますので、そこを参照してください。
パラメータの書き方としては、
$(function(){
$("#datepicker").datepicker({;
numberOfMonths: 3,
showButtonPanel: true
});
});
</script>
といったように、「,」区切りで指定したいパラメータを羅列するだけです。
jQuery UIのDatepickerでできること
公式サイトにサンプルがありますが、それをいくつか紹介したいと思います。
実際は他にもできることがありますし、組み合わせも可能です。
使用するための参考として、見ていただければ。
日付の書式ですが、自由に設定することができます。
サンプルでは選択式ですが、内部的に１つだけ持つことも可能です。
今日より前後１ヶ月、といったように、選択できる日付の幅を設定することができます。
制限範囲外はグレーアウトされ、選択できないようになります。
表示するカレンダーに使用する、言語を指定できます。
もちろん日本語もありますので、ローカライズに苦労することはありません。
カレンダー下部に、機能ボタンを追加できます。
今日の月に戻るボタンと、カレンダーを閉じるボタンです。
ネットに慣れていない人には親切ですね。
カレンダーの年と月の部分を、プルダウンにできます。
これであれば一気に移動できるようになりますので、使う側としては便利ですよね。
カレンダー表示で、複数月分の表示ができます。
月をまたいで指定したりする場合に便利です。
いつからいつまで、といったように、期間を選択するような場面でも使えます。
TOの方は、FROMより前の日付が選択できないように、ちゃんとグレーアウトされていますね。
以上、高性能だけどお手軽に適用できる「jQuery UIのDatepicker」の解説でした。
Tweet
|
||
| カテゴリー | ： | 便利ツールやサイト |
| キーワード | ： | jQuery,JavaScript,jQuery UI,Datepicker,日付入力,カレンダー |
こんばんは、ベンドナママさん。
はね丸です。
こちらで「south street」を適用した簡単なサンプルを作ってみました。
下記URLにアクセスしてみてください。
http://www.hanemaru.com/samp/datepicker.html
数行の簡単なソースですので、ソースを見ていただければ指定のしかたがわかると思います。
もし同じソースで違う表示になってしまう場合、Datepickerを適用しようとしているページのCSSが干渉している可能性もありますね。
ただ「lightness」であれば正常に表示されているようですので、おそらく指定のしかたではないでしょうか。
はね丸 2012-06-27 22:58:51
はね丸様、今晩は。
早速のお返事有難うございます。
できました。
間違っていたのは、south streetの記述でdemoの通りにスペースをしていました。正しくはsouth-streetなんですね。
もう一つお聞きしたいのですが、
date:の表記はfanctionの中にformat options:iso 8061-yy-mm-ddを挿入するのですか？
後、大きさを調整するのもfanctionでできますか？
お仕事でお疲れのところ大変申し訳ありませんが、教えていただければ、幸甚です。
宜しくお願いします。
ベンドナママ 2012-06-28 01:01:35
こんばんは、はね丸です。
>間違っていたのは、south streetの記述でdemoの通りにスペースをしていました。
はい、私の記事本文にも「注意点としては、サイト上はテーマ名を大文字混じりで書かれていますが、ソース上は全て小文字で書きます。
またスペースの入っているテーマ名は、スペース部分を「-」に置き換えます。」と以前より書いていましたので、-が正しいです。
>date:の表記はfanctionの中にformat options:iso 8061-yy-mm-ddを挿入するのですか？
私の場合はデフォルトで十分でしたので、特に指定していません。
もし変更するのであれば下記URLを参照してください。
http://docs.jquery.com/UI/Datepicker/formatDate
>大きさを調整するのもfanctionでできますか？
パラメータ一覧は下記URLになります。
http://docs.jquery.com/UI/Datepicker
ザッと見たところ、大きさに関わるパラメータはありませんでした。
カレンダーサイズ＝文字サイズだと思いますので、CSSなどで文字サイズを指定すれば、カレンダー全体のサイズが変わると思います。
私は今のところサイズ変更を使うことがありませんので、わかるのは以上になります。
はね丸 2012-07-02 01:55:48
はじめまして！
showButtonPanel: trueを指定しても
今日ボタンだけで、閉じるボタンが現れない解決方法ご存知ですか？
bicycle 2012-09-28 17:24:20
こんばんは、はね丸です。
パラメータには準備されていないようですね。
currentTextを空白にすれば…と一瞬考えましたが、枠が表示されてしまうようです。(笑)
残念ながら、コードそのものを書き換えるしか手は無いように思われます。
はね丸 2012-09-30 01:59:54
はじめまして！
これって、ライトボックス調に表示させることはできないのでしょうか？
やまやま 2012-10-02 11:33:09
こんばんは、はね丸です。
すみません、ライトボックス調というものがどのような状態を指しているのかちょっとわかりませんが、バックがトーンダウンしてカレンダーが浮き上がるという状態でしたら、どうもできないようですね。
カレンダー表示のアニメーションであれば可能です。
http://jqueryui.com/demos/datepicker/#animation
はね丸 2012-10-02 17:38:21
大変参考になります。
自分なりに変えたいのですが、何処をどうしていいかわかりません・・・。
jsをＤＬして書き換えるならわかるんですが、
http://www.hanemaru.com/samp/datepicker.html
↑上記を見ると、googleから読んでますよね？
書き換える場所が、サイトのどこにあるのかわかりませんでした。
なので、そのＵＲＬのものをそのまま使っているんですが、少し変えたいのです。
１、カレンダーの表示が大きいので、表示を50％程度にしたい。
２、現在日付より先の日付は選択出来ないようにしたい
上記です。
何卒アドバイスを頂きたく。
初心者 2013-01-03 19:15:53
こんばんは、はね丸です。
当サイトではテーマの変更やDatepickerの動作については書いていますが、テーマやスクリプトの改造自体は想定していません。
バージョンアップの度に再修正が必要になるため、私としてはあまり好ましいとは思っていないためです。
もし改造を希望するのであればスクリプトとCSSをダウンロードし、ご自身の利用するサーバ上に設置する必要があります。
ダウンロード元は当サイトにも記載があります、
http://jqueryui.com/
になります。
「１、カレンダーの表示が大きいので、表示を50％程度にしたい。」は機能として実装されていないように思われますので、CSSを直接変更してください。
http://jqueryui.com/themeroller/
ここを使用すれば、サイト上でCSSをカスタマイズしてダウンロードできます。
パラメータを変更する度に画面へ反映されるので、変更の結果が把握しやすいです。
「２、現在日付より先の日付は選択出来ないようにしたい」は設定で対応できます。
maxDate: "0"
を指定すればよいと思います。
パラメータの詳細は
http://api.jqueryui.com/datepicker/
を見てください。
はね丸 2013-01-05 20:54:38
大変参考になりました！ありがとうございます！！！
tyou3 2013-01-29 12:34:25
はじめまして、はね丸様
フォームの3か所に日付け入力があるので、カレンダーを3か所に設置したいのですが出来るでしょうか？
その方法があれば大変助かります。
宜しくお願いします。
nakanaka 2013-08-10 09:55:15
こんにちは、はね丸です。
複数のカレンダー設置は可能です。
カレンダーインターフェースを適用したい全てのフォームにidを付与し、jQuery UI Datepickerの設定JavaScriptをその数分だけ羅列するだけで実現できるはずです。
公式サイトのサンプルスクリプトにヒントが沢山あると思いますので、そちらも参照してみるとよいかもしれません。
はね丸 2013-08-10 14:36:33
コメントを記入する
コメントを受け付けました。
コメントは管理人の承認後、表示されます。
PHP自体は4年ほど触ってますが、触れる時間が少ない事もあってそこそこの技術力しかないです。
深夜12時に帰宅してから作業…ということも多いため、生産能力も著しく低いです。
こんな私ですが、今後もよろしくお願いします。
育児や仕事、日々思うことなどプライベートなブログはこちら。
イクメンはね丸の思うこと
@hanemaru_comをフォロー
初めまして。
JQueryの初心者です。
JQueryのdatepikerでカレンダーを作りたくいろいろ探してたどり着きました。
こちらでテーマを変える場合は赤字のところを変えるとできるとのことで、smoothnessとか、south streetとかで試してみましたが、lightnessのように色や線が出てきません。
大変恐縮ですが、south streetの色つきカレンダーにする方法をご教授いただけますでしょうか？
ベンドナママ 2012-06-27 21:02:59