Category javascript, protocalendar.js | 10 Comments »

10 Responses to “ シンプルな日時選択ライブラリ protocalendar.js v1.1.7.1 を公開しました ”

1. # 1 いちかわ Says:
   8月 20th, 2008 at 9:39 AM

   日本の祝日に対応しているということで、担当しているシステムで使わせていただこうかと思っているのですが、いくつか問題がありまして、質問させてください。

   ・日付選択時のunloadイベント
   bodyタグにonBeforeUnloadで処理を追加しているのですが、日付を選択すると、unloadイベントが発生するようでこのハンドラが起動してしまいます。カレンダー外をクリックしてhideするときには起きないのですが、日付を選択したときだけ発生するようです。
   Firefoxでは発生せず、IEでだけ起きるようです。
   何か対応策は有りませんか？

   ・表示位置のオフセット
   はみ出したときの改善としてカレンダー表示が行われるように、本体のコンテンツをスクロールしておられるようですが、逆にカレンダー表示位置をオフセットするというオプションは付けられませんか？
   とりあえずsetAlignmentで指定してるoffsetsの値から固定値を引いて回避していますが、あまり美しくないなぁと思いまして・・・
   1)カレンダーの右端が切れてしまうときには、表示できるだけ左にオフセット。
   2)カレンダーの下端が切れてしまうときには、下端が入力欄(alignTo)の上辺に接するようにオフセット。
   なんてロジックはどうでしょうか？

2. # 2 kusakari Says:
   8月 20th, 2008 at 10:55 AM

   >>いちかわさん
   コメントありがとうございます。

   ・unload について
   IEでカレンダー表示時に unload が発生する問題は、select タグに z-index が効かないという IE のバグのために、IE のときだけ iframe を作ってその上にカレンダーを表示させているためだと思います。
   カレンダーの表示と被る位置に select タグがないのであれば、1.1.7.1 なら 269行目あたりの createIframe を呼び出している箇所をコメントアウトすれば、iframe が表示されなくなるため、うまくいくかもしれません。
   こちらの問題については、次回バージョンアップ時に unload を呼び出さないようにできるか調べてみます。

   ・表示位置について
   表示位置については問題として認識していて、スクロールではなく、カレンダーが画面ないに収まるように表示するように改修を予定しています。ご提案頂いたロジックを使わせて頂くか、それに近いものになると思います。
   こちらは次々回になってしまうかもしれません（もしかしたら次回）が、バージョンアップ時に修正予定です。

3. # 3 いちかわ Says:
   8月 20th, 2008 at 11:17 AM

   早速の回答ありがとうございます。

   createIframe近辺、及びiframeに関する部分をひととおりコメントアウトしたのですが、やはりイベントは発生するようです。
   残念・・・

   バージョンアップに期待します。

4. # 4 いちかわ Says:
   8月 20th, 2008 at 1:43 PM

   たびたびすいません。

   日付を選択せずに欄外クリックするときに、直接入力された、もしくは元々入力されいてた日付以外の値を消さない方法ってありますか？
   日付だと残るんですが、日付以外だとinputタグのvalue=”"で入ってくる値も表示されないようです。
   大人な事情ですいません。

   ちなみにunloadイベントは、inputのonclickイベントでフラグを立てるというかっこ悪い方法で回避できました。

5. # 5 kusakari Says:
   8月 20th, 2008 at 3:14 PM

   >>いちかわさん
   iframe 周りだと思ったのですが…試さずすいません。
   またバージョンアップ時に調べてみます。

   日付以外の入力値を消さない方法は、一番安全な方法だと、
   http://labs.spookies.co.jp/2008/07/10/protocalenderjs-handling-change-input-value/

   をベースにして、以下のようなコードでいかがでしょうか。

   Object.extend(
   InputCalendar.prototype,
   {
     changeInputValue: function() {
       var preValue = this.input.value;
       this.input.value = this.dateFormat.format(this.calendarController.getSelectedDate(), this.options.lang);
       if (this.input.value == '' && preValue != '') {
         this.input.value = preValue;
       }
     }
   });
   

   日付として解釈できなければ、入力値を消す仕様はなぜそうしたか忘れてしまったのですが、何か理由があってそのようにしたのだけは覚えています。
   ちょっとそのあたりの仕様も再検討してみます。

6. # 6 いちかわ Says:
   8月 20th, 2008 at 3:57 PM

   お～ ありがとうございます。

   位置的にそこで調整するってのは読めたんですが、埋め込むコードの試行錯誤中でした。
   ばっちりです。

   本当にありがとうございました。

7. # 7 いちかわ Says:
   8月 21st, 2008 at 2:27 PM

   連投で申し訳有りません。再び相談させてください。
   カレンダーの動作についてはまったく問題ないのですが、何故かまったく同じページで初回だけカレンダーが表示されないという問題がIEでのみ起きています。
   Firefoxでは問題ありませんでした。
   (初回だけ：全てのIEを閉じた状態から最初に当該ページを開いたとき)

   実は、JSPでアプレットも乗ってるページにカレンダーを２つ設置したところ、当該ページでロードエラーが発生するようになってしまいまして、調べてみたところカレンダーをコールする行をコメントアウトするとロードエラーは治まりました。多分ロード時にカレンダーのレンダリングが入るからだろうと思い、タイミングをずらすためにページ末尾にカレンダーコールを移動したところ、前述の「初回だけ表示されない」という問題が起きてしまいました。２回目以降は正常表示されます。

   少しタイミングをずらして、ボディタグのロードイベントでカレンダーのコールができないかと試してみたのですが、第一パラメータの渡し方が判らずとなってしまいました。

   同梱のサンプルページをローカルで開くときも、時間がかかるなぁと気になっていたのですが、カレンダー自体のレンダリングタイミングをずらす方法がありましたら教えてください。
   （オブジェクトだけ作っておいて、クリックでレンダリング等）

8. # 8 kusakari Says:
   8月 21st, 2008 at 2:59 PM

   >>いちかわさん
   コメントありがとうございます。

   InputCalendar.createOnLoaded(‘style-id’);

   のように呼び出すことで、prototype.js 1.6 なら docment.observe(“dom:loaded”)、1.5 なら Event.observe(window, ‘load’) という形で内部的に呼び出されるため、createOnLoaded を呼び出す位置はどこでもかまいません。（カレンダーは上記イベント時に初期化されます。なのでサンプルは表示が重いです。）

   createOnLoaded を使用せずに、new InputCalendar(‘style-id’, options); の形式で呼び出すと、呼び出し位置でカレンダーの初期化が始まります。
   この書き方の場合、どこで呼び出すかによってはエラーが出てしまう可能性があります。
   数個のカレンダーであれば createOnLoaded で問題ないと思いますが、大量にある場合は、onclick イベントで new InputCalendar しても良いと思います。

   ちなみにデモページでも同じ現象が起こりますでしょうか？
   http://labs.spookies.jp/demo/protocalendar/sample/calendar_usage.html

9. # 9 いちかわ Says:
   8月 21st, 2008 at 4:16 PM

   毎度毎度回答ありがとうございます。ひじょうに助かります。

   全体的に自分の勘違いというか理解不足でした。
   createOnLoadってメソッド名にまったく気付いていませんでした。これこのままonLoadイベントに入れてもダメですよね。
   new InputCalender() をonLoadイベントに入れたらスンナリ動いてくれました。

   これでゆっくりと週末を過ごせます。:-P
   JavaScriptの復習でもしようかと思っています。
   ありがとうございました。

   ちなみにデモページは、IEで右上のハタが止まってから５秒くらい考えた後に表示されるようですが、ロードエラーは出ません。
   当方の問題が出たページではアプレットが10個ほど乗った重装備なページで、それらの初期化も影響しているのではないかと思われます。

10. # 10 kusakari Says:
    9月 18th, 2008 at 8:42 PM

    >>いちかわさん
    1.1.8 で unload 対応と、表示位置対応を入れました。
    ぜひお試し下さい。

Leave a Reply