ブラウザで日付入力のインターフェイスを実現…
jQuery とプラグインを使用するのが最近は主流なのかな、と検索でたまたま最初に見つかった、
simple jQuery date-picker plugin
を組み込んだ。
jQuery とプラグインを使用するのが最近は主流なのかな、と検索でたまたま最初に見つかった、
simple jQuery date-picker plugin
を組み込んだ。
わりといい感じなのでそのまま使用することにしたのだが、日付を入力した後の text 変更イベントが発生しないようだ。(jQuery の change イベントハンドラが呼び出されない)
どうも、jQuery の change イベントはフォーカス後、フォーカスを失ったところで値の変更を検出しているらしい。
やっぱり日付選択したらアクションして欲しいよね、ということで:
日付選択後に text に日付を挿入しているのはスクリプト内の closeIt 関数
日付選択後に text に日付を挿入しているのはスクリプト内の closeIt 関数
[cal.js] function closeIt (el, datepicker, dateObj) { if (dateObj && dateObj.constructor == Date) el.val(jQuery.fn.simpleDatepicker.formatOutput(dateObj)); datepicker.remove(); datepicker = null; jQuery.data(el.get(0), "simpleDatepicker", { hasDatepicker : false }); }セットした後に、値が変更されていたら change イベントを呼ぶようにする
function closeIt (el, datepicker, dateObj) { datepicker.remove(); datepicker = null; if (dateObj && dateObj.constructor == Date) { var oldval = el.val(); el.val(jQuery.fn.simpleDatepicker.formatOutput(dateObj)); if (oldval != el.val()) { el.change(); } } jQuery.data(el.get(0), "simpleDatepicker", { hasDatepicker : false }); }
※ちなみに
jQuery Text Change Event を使って twitter をインクリメンタル検索するサンプルを書いた - ess sup
で紹介されているようなプラグインでもイベントは発生しない様子。恐らくはフォーカスを得たときだけ検査するようにしているのだろうと思われる
jQuery Text Change Event を使って twitter をインクリメンタル検索するサンプルを書いた - ess sup
で紹介されているようなプラグインでもイベントは発生しない様子。恐らくはフォーカスを得たときだけ検査するようにしているのだろうと思われる
ひとしきり満悦した後、
日付入力のためのjQueryプラグイン 10選 - Sometime PHP みたいなものを見つけて、ひょっとすると jQuery UI Library にある DatePicker ではできたりするんかなぁ、とか思いながらそっとウィンドウを閉じたのだった。
日付入力のためのjQueryプラグイン 10選 - Sometime PHP みたいなものを見つけて、ひょっとすると jQuery UI Library にある DatePicker ではできたりするんかなぁ、とか思いながらそっとウィンドウを閉じたのだった。
コメント