シンプルな日付選択用ライブラリ「protocalendar.js」を公開しました
Post on 11 月 20th, 2007
by kusakari
prototype.js ベースの日付選択用 javascript ライブラリ「protocalendar.js」を公開しました。
rails や cakephp でアプリケーションを作っていて、セレクトタグでは日付を選択し辛いと感じていました。
また、オープンソースの Date Picker ライブラリでは機能不足、もしくはオーバースペック過ぎて手頃なものがないと感じていました。
そこで、社内で prototype.js ベースの日付選択用ライブラリを作ってみようということになり作ってみました。
今後もバージョンアップしていきたいと考えているので、ご意見ご要望などありましたらコメントでお願いします。
【特徴】
*prototype.js ベース（1.5 以降）。
*シンプルで軽量。
*MIT LICNESE
*16のローカライゼーションに対応。
*フォーカスでカレンダー表示。（トリガーを追加可能）
*日付フォーマットを変更可能。
*日付のラベル表示が可能。（フォーマットも変更可能）
*年・月を直接変更可能。（年選択時に前後指定年数を表示）
*カレンダーの開始曜日を変更可能。
*日本の祝日対応。（カスタマイズ可能）
*「今日」、「明日」、「明後日」などの任意の文字入力にも対応。（カスタマイズ可能）
*いくつかの標準スタイルを用意。（付属の paper, metal などの画像、 css も MIT LICNESE）
*effects.js と組み合わせてエフェクトに対応。（現在は、Appear のみ。他のエフェクトにも対応予定）
*クロスブラウザ （IE6 以降, Firefox2 以降, Safari2 以降, Opera9 以降）
【使い方はこちら】
http://labs.spookies.co.jp/static/protocalendar-js-1.0/sample/calendar_usage.html
【download はこちら】
http://code.google.com/p/protocalendar/downloads/detail?name=protocalendar-js-1.1.0.zip
【今後の展望】
*Appear 以外のエフェクトに対応。
*スタイルの追加。
*「閉じる」、「クリア」を表示するオプションの追加。
スプーキーズラボブログは株式会社スプーキーズの技術関連の情報を発信するブログです。プロダクト一覧、お問い合わせなどは
11 月 21st, 2007 at 18:30:05
はじめまして．
ヘルパのdatetime_selectorとか使うと，selectタグが複数並ぶので使えないですよね．
見つけたDatePickerはどれも一つのテキストフォームにしか対応してなかったので，
自分で作ろうか思案中に，「ご意見ご希望・・・」と書いてあったのでコメントしちゃいました．
11 月 22nd, 2007 at 10:18:10
はじめまして。MIT LICENSEとの事なので、さまざまな既存スクリプトとの組み合わせができれば…と思い2点要望をあげさせていただければと思います。
1.時刻設定機能
2.1ともhiroshiさんの要望とも絡みますが、フォームの中には年/月/日 時:分:秒の各項目が別フォームになっているタイプがあるかと思います。
そういったものの入力にも対応できれば(かつ各フォーム名は設定で指定できる)。
以上コレとhiroshiさんの上げられた要望が実現できれば、ほぼ組み合わせられないフォームはないことになると思うので、ご検討いただければと思います。
11 月 22nd, 2007 at 12:01:02
コメントありがとうございます。
>>hiroshi さん
cakephp の $html->dateTimeOptionTag や rails の date_select のような、セレクトタグで日付を選択するような UI に関しては、テキストボックスで入力するように変更してもらって、このライブラリを使うというのを想定していました。
こちらで cakephp と rails 用のヘルパーを公開しています。
http://d.hatena.ne.jp/kusakari/20071121
藤咲さんも同じことを希望されていますし、
複数の入力エレメントに値が返せるようにバージョンアップを検討してみます！
>>藤咲さん
時刻設定は確かに何らか考慮する必要があると考えていました。
例えば、rails の datetime_select 利用のときなど。
こちらもバージョンアップ時にどのように対応するか検討してみます！
11 月 22nd, 2007 at 14:07:28
はじめまして。
早速、利用しようとしているのですが
inputタグに初期表示される日付を出さないというような
オプションはあるのでしょうか？
ソース内に date, lang という箇所があったので、
できそうに思えましたが、言語設定のように引数で指定できるのなのか
どうかまでは理解できませんでしたので。。。
11 月 22nd, 2007 at 15:06:54
>>naskin さん
コメントありがとうございます。
現在は初期値をなしにはできません。
初期値の指定は、以下のようにすることで可能です。
new InputCalendar(’calendar’, {year: 2000, month: 1, day: 1});
次のバージョンではデフォルトの初期値はなしにしようと考えています。
11 月 22nd, 2007 at 16:20:27
お返事ありがとうございます．
＞テキストボックスで入力するように変更してもらって、
自分で使うものだとすぐテキストボックスに変えてしまえばいいんですが，
PC初心者にテキストボックスにうまく日付を入れさせる(”-”とか桁とか)のは敷居が少し高いかなと思いまして．
バージョンアップに期待してます♪
11 月 22nd, 2007 at 19:26:13
回答ありがとうございます。
初期値の指定の仕方の方法も参考になりました。
11 月 23rd, 2007 at 0:05:29
はじめまして。かっこいいカレンダーですね。MITライセンスというのもありがたいです。ソースコードを見させていただいたのですが、振替休日の判定が祝日が続く限り翌日とするロジックになっていますが、以下のページによると1973年4月30日前後と2008年5月6日前後でルールが変わっているそうです。
http://ja.wikipedia.org/wiki/%E6%8C%AF%E6%9B%BF%E4%BC%91%E6%97%A5
1973年4月30日より前は振り替え休日無し、1973年4月30日から2008年5月6日より前は祝日が日曜の場合に翌日の月曜が振替休日となります。2008年5月6日以降は祝日が日曜の場合にその後に祝日が続く限りその次の日となります。
あと、1949年以降1988年までの4月29日が天皇誕生日というのが抜けていますね。
http://ja.wikipedia.org/wiki/%E5%9B%BD%E6%B0%91%E3%81%AE%E7%A5%9D%E6%97%A5
ちなみに、
http://code.google.com/p/japanese-holidays/
にて拙作の休日判定ルーチンを公開しています。こちらもMITライセンスですのでよかったら参考にしてください。
11 月 23rd, 2007 at 0:19:25
>>hnakamur さん
コメントありがとうございます。
祝日判定のご指摘もありがとうございます。
こういうご指摘を頂けるのもオープンソースの良さですね。
次回バージョンアップ時に休日判定ルーチンを参考にさせて頂きます！
5 月 16th, 2008 at 17:41:47
初めまして。そういうものなのかも知れませんが、年月横の「>」をクリックしていくと、startYear,endYearの範囲外まで進めるようです。表示上はstartYear,endYearで止まっていますが、日付をクリックすると選択結果は範囲外の年月となっています。
ソースを追いかけて見ましたが不得手なものでよく分からず、直るものならお願いします。
5 月 21st, 2008 at 19:41:53
表示されるフォントサイズが変わってしまう(?)のか、
月曜日から土曜日までしか表示されず、日曜日が入力できません。
どのような原因が考えられますか。
6 月 4th, 2008 at 15:46:36
>高須晋弘さん
ご報告ありがとうございます。
こちらは次回のバージョンアップ（1.1.6）時に移動できないように修正します。
>Hasegawaさん
http://labs.spookies.jp/demo/protocalendar/sample/calendar_usage.html
こちらでも日曜日が出ない場合は、ブラウザの設定、
アプリケーションに組み込んだページで出ない場合は、
他に読み込んでいるスタイルシートが影響しているのだと思います。
simple.css などで表示の修正をしてみて下さい。
7 月 25th, 2008 at 15:37:53
はじめまして。protocalendarについては、シンプルで使いやすと評判です。
とりあえず気づいたことですが、7月の海の日が8月になっています。
7 月 25th, 2008 at 16:00:25
>>gajyu さん
ありがとうございます！
海の日の不具合は protocalendar.js v1.1.5.1 で修正されていますので、最新版で試してみてください。
http://labs.spookies.jp/product/protocalendar
よろしくおねがいします。
7 月 26th, 2008 at 7:45:16
お世話になっております。
素晴らしいコンポーネント御苦労さまです。
ひとつお伺いしたいのですが
テキストボックスからロストフォーカスで
カレンダーを閉じる機能はありますか？
あるいは
blurイベントを追加してhide処理を呼び出す処理を追加する
必要がありますか？
よろしくお願いします。
7 月 28th, 2008 at 11:51:38
>>onode さん
現状では、blur 時に hide するように拡張しないとだめなのですが、
次のバージョンで blur 時には消えるように修正します。
7 月 29th, 2008 at 10:59:38
迅速な新バージョン、ありがとうございます。
ロストフォーカスでのカレンダー非表示実装確認いたしました。
私はtableのtdの中でINPUTに使わせていただいているのですが、
カレンダー表示の際に、画面が上に引っ張りあげられるような動きになってしまうようです。
7 月 29th, 2008 at 11:37:16
>>onode さん
その動きは今回のバージョンアップの以下の項目になります。
*ProtoCalendar の表示位置が画面外であった場合、スクロールして表示するようになりました。
ということで、動作的には仕様通りということになります。
この際、scrollTo を使っているため、スクロール位置は画面の最上部になります。
ただ、protocalendar の場合、表示領域も少ないのにスクロールしすぎな感じは否めないので、カレンダー下端ががぎりぎり収まるところまでスクロールするという方法も検討中です。
7 月 29th, 2008 at 17:36:34
またまた迅速なご回答ありがとうございます。
ちなみに、現在のバージョンだと、直接入力できないですね。
blurCalendar: function(event)で
if (event.keyCode == 9) {
this.hideImmediatelyCalendar();
}
のように、!=ではなく、==でhideするようにしたら、入力はできるようになりましたので、ご報告いたします。
画面外でスクロールする件、了解しました。
私としては、画面のど真ん中の項目でも、上に持っていかれたので、ついびっくりして書きこんでしまいました。すいません。
さらに余談ですが、
ロストフォーカス(Blur）で閉じる というより、TabKEYイベントで閉じるんですね。Tab以外のKEYの条件でFocusするときは、自作が必要ですね。私は大丈夫ですけど。
よろしくお願いします。
7 月 29th, 2008 at 18:41:18
>>onode さん
不具合報告ありがとうございます！
直接入力できないのは完全な不具合でしたので、上げ直しました。
ロストフォーカスに関してはご指摘の通りです。
最初は blur イベントをハンドリングする形で実装していたのですが、
blur イベントではキー情報が取れないようなので、keydown に変更してみました。
ここについては、スクロール同様もうちょっと考慮が必要かなと思っているのですが、とりあえずという感じです。
7 月 29th, 2008 at 20:49:17
御苦労様です。
たびたびお伺いして申し訳ないのですが
現在のコンポーネントはカレンダーを選択すると、フォーカスが無くなってしまうようですが、
カレンダー選択後にフォーカス位置を
テキストボックスに戻す方法はありますでしょうか？
7 月 29th, 2008 at 21:56:47
>>onode さん
いえいえ、改善提案非常に助かります。ありがとうございます。
現状だと、この記事のやり方でフォーカスを戻すことができます。
http://labs.spookies.co.jp/2008/07/10/protocalenderjs-handling-change-input-value/
値選択の前後に拡張ポイントを作るか、フォーカスを戻すか、
などいくつか方法を検討していきたいと思います。
8 月 9th, 2008 at 12:37:47
デモを拝見しました。
すばらしいカレンダーですね。
少し気になった点を書かせていただきます。
選択可能な最も過去の年の1月で、
さらに前の年の数日が表示されている場合、
最も古い日付を選択すると
年で指定できないはずの日付が入力できてしまいます。
さらに、入力できた日付を1日過去にしてカレンダーを表示すると、
月日は入力された月日を指しますが年は入力値ではなく、
選択可能な最も過去の年になります。
デモでいうと、1998年1月を選択したときに表示される、
1997年12月29日を選択します。
すると入力は選択どおりできます。
次に1997年12月28日に直接入力を変更し、
再度カレンダーを表示すると、
1998年12月28日が選択状態となるわけです。
この動作には若干違和感を感じました。
前者はありだとしても後者は選択可能な最も近い日付を
指しているほうが違和感がないかと感じましたので
報告しておきます。
これからもすばらしいツールを期待しています。
8 月 12th, 2008 at 14:40:45
>>takedayoさん
ありがとうございます。
その動作については、こちらでも把握してまして、
バージョン1.1.6 以降であれば、minDate, maxDate オプションを指定することで
選択できないようにすることが可能です。
現状デモしかないので、もう少しマニュアルを整備するか、よくある質問的なものを
作成したいなと思っています。
1 月 19th, 2009 at 14:48:36
はじめまて。
以前よりすごいツールがあるなと関心してみておりましたが、今回利用させていただく機会がありましてＤＬさせてもらいました。
現在ＨＴＭＬに組み込みしているのですが、どうも私の指定が悪いのか、不具合なのかの判断がつかず、投稿させていただきました。
2008/1/1～2008/12/31をカレンダー表示して選択できるようにしたいのですが、2008/1/1（元旦）を選択したにもかかわず2008/2/1が選択された動作となってしまいます。ＨＴＭＬでは以下のような指定をしております。
ご教授お願い致します。
InputCalendar.createOnLoaded(’icon_calendar1′, {inputReadOnly: true, lang:’ja’, triggers: ['calendar_icon1'],format: ‘yyyy/mm/dd’,minDate: new Date(2008,01,01), maxDate: new Date(2008,12,31),showEffect: ‘SlideDown’, hideEffect: ‘SlideUp’});
1 月 19th, 2009 at 14:52:04
すいません。訂正します。
指定したのはこちらです。
InputCalendar.createOnLoaded(’icon_calendar1′, {inputReadOnly: true, lang:’ja’, triggers: ['calendar_icon1'],format: ‘yyyy/mm/dd’,startYear: 2008, endYear: 2008, minDate: new Date(2008, 1, 1), maxDate: new Date(2008,12,31),showEffect: ‘SlideDown’, hideEffect: ‘SlideUp’});
1 月 19th, 2009 at 15:06:30
>>cutedogさん
ご利用ありがとうございます。
javascriptの Date オブジェクトの月は0から始まっているため、1を指定すると、2月になってしまいます。
「とほほのJavaScriptリファレンス」などで一度ご確認お願いします。
http://www.tohoho-web.com/js/date.htm
1 月 19th, 2009 at 15:50:22
早速の回答ありがとうございます。
なるほど！！できました。
月は０起算だったんですね。てっきり「月」指定なのかと思ってました。
あと、もう一点質問があるのですが、
カレンダーのオプション再指定をしてカレンダーの再ロードを行いたいのですが、どうすればできるのでしょうか？
やりたいことは、前記質問のコードを利用して、親画面上で「年」リストを作っておき、この「年」リストを変えることで、カレンダー表示した際に年の範囲を変更したいのですが、最初にロードしたカレンダーしか表示されないのです。
当スレの主旨にはずれる質問かもしれませんが、
宜しくご教授願います。
1 月 19th, 2009 at 16:31:54
>>cutedogさん
http://labs.spookies.co.jp/2008/09/22/protocalendar-js-1-1-8-1-release/#comments
の下の方でコメントされているように、
カレンダーをインスタンス変数（例えば cal）として持っておいて、
「年」リストが変わったときに、以下のようにすることで、
動的に変更することが可能だと思います。
cal.options.minDate = new Date(1900, 0, 1);
1 月 19th, 2009 at 16:55:05
ありがとうございます。
やってみます。
3 月 30th, 2009 at 18:20:05
はじめまして、
非常に優れたライブラリ、ありがとうございます。
日付フォーマットに「format: “yyyymmdd”」という指定はできないようですね。20090330という表示をしたかったのですが。どうしてもUIがつかいたいので、改造できないか考えてみます。
5 月 29th, 2009 at 16:07:03
はじめまして。
便利なライブラリのご提供ありがとうございます。
使っていて、気づいた点をご報告させていただきます。
例えば、今日の日付が2009年5月29日で、日付入力テキスト欄に表示された日付が、”2009/02/20″だとします。
日付入力テキストをクリックすると、2009年3月のカレンダーが表示されます。
ソースを追って調べたところ、parseメソッドで、
var date = new Date();
とした時点で、dateは2009年5月29日です。
これに、年、月、日の順にセットされていきます。
月に2をセットした時点で、2月29日になるため、3月1日と変換され、続いて、日がセットされて3月20日となるようです。
よろしければ、修正していただけませんでしょうか？
5 月 29th, 2009 at 16:28:55
さきほど投稿したMasahiroです。
私が使っていたのは古いバージョン（1.1.0）でした。最新バージョン（1.1.8.2）では修正されていました。
お騒がせしてすみませんでした。