![]() |
JavaScript でカレンダー
2010.03.15記 |
ホームページの入力フォームで、日付入力が必要な場合、カレンダーが表示され、入力を支援してもられると助かります。
今回は JavaScript を使って、カレンダーを表示させライブラリなどを探してみようと思います。
今回は JavaScript を使って、カレンダーを表示させライブラリなどを探してみようと思います。
JKL.Calendar
![](./files/20100115/page_html.gif)
![](./files/20100115/action_forward.gif)
![JKL.Calendar JKL.Calendar](./files/20100315/jkl.gif)
テキストボックスにカーソルを入れるとカレンダーがポップアップします。
YUI:Calendar
![](./files/20100115/page_html.gif)
![](./files/20100115/action_forward.gif)
![YUI:Calendar YUI:Calendar](./files/20100315/yui.gif)
カレンダーをクリックするとテキストボックスに日付が入ります。テキストボックスに日付を入れてから「Update Calendar」ボタンをクリックするとその日付のカレンダーが表示されます。日付のフォーマットが「MM/DD/YYYY」です。プロパティを変更しないといけないのかな。
![](https://www.keibunsya.co.jp/uploads/smil3dbd4d99c6eaa.gif)
mootools+Calendar
![](./files/20100115/page_html.gif)
![](./files/20100115/page_html.gif)
![](./files/20100115/page_html.gif)
![](./files/20100115/action_forward.gif)
![mootools+Calendar mootools+Calendar](./files/20100315/mt.gif)
テキストボックスにカーソルを入れるか、テキストボックス脇のカレンダーアイコンをクリックするとカレンダーが現れます。テキストボックスへ日付を入力することはできません。READONLY属性が付加されるようです。
jQuery UI Datepicker
![](./files/20100115/page_html.gif)
![](./files/20100115/action_forward.gif)
![jQuery UI Datepicker jQuery UI Datepicker](./files/20100315/dp.gif)
UIからすべてをダウンロードして、デモサンプルのソースを見ながら必要そうなファイルをピックアップして設置しました。簡単ファイルセットとかはないのかな?
JS Calendar
![](./files/20100115/page_html.gif)
![](./files/20100115/action_forward.gif)
![JS Calendar JS Calendar](./files/20100315/dc.gif)
設置は、いたって簡単な部類でした
まだまだ探せばいろいろ出てきそうですが、
実際使う場合はどれを使おうか悩みそうだ。
- 設置が簡単
-- ファイルが少ない
-- スクリプト記述量がすくない
- デザインがきれい
- カスタマイズしやすい
などなどが選択する時の条件かな
- 設置が簡単
-- ファイルが少ない
-- スクリプト記述量がすくない
- デザインがきれい
- カスタマイズしやすい
などなどが選択する時の条件かな
![]() 2010.04.15 PHPExcel で Excelファイルをつくる |
![]() 2010年 |
![]() 2010.02.15 印刷会社のホームページ8(世田谷) |