18

DatePickerには内部関数があり、_adjustDate()後でコールバックを追加したいと思います。

現在の方法

これが私が現在これを行っている方法です。基本的には、関数の定義をそれ自体に置き換えるだけでなく、新しい操作も必要です。これはすべての日付ピッカーに影響しますが、これも望ましいかどうかはわかりません。

$(function(){

   var old = $.datepicker._adjustdate;

   $.datepicker._adjustDate = function(){
      old.apply(this, arguments);

      // custom callback here     
      console.log('callback');
   };

});

_adjustDateは、次/前の月のクリック中に呼び出されるものです。この関数は3つのパラメーターを取ります。コールバックを追加するより良い方法があるかどうか知りたいです。


期待される結果

最終結果を次のようにしたいと思います。afterAjustDateコールバックハンドルはどこですか：

$('#datepicker').datepicker({ 
       showButtonPanel: true
     , afterAdjustDate: function(){ $(this).find('foo').addClass('bar'); }
});

ご参考までに

onChangeMonthYearは受け入れ可能なイベントの代替手段ではありません。また、live()/ delegate()（IEでは機能しません）バインディングオプションもありません。

これは、月が選択された後にクラスを適用したり要素を操作したりする必要があるためです。月を変更すると、カレンダーの要素が再作成されます。これが実行されると、jQueryUIはクラスの変更を継承するほど賢くありません。したがって、日付を変更した後、コールバックが必要です。

4

4 に答える 4

34

コールバック関数を日付ピッカーに渡すために使用できるonSelectオプションがあります。これは、必要なものに対する組み込みのソリューションのようです。

$('.datepicker').datepicker({
  onSelect: function(selectedDate) {
    // custom callback logic here
    alert(selectedDate);
  }
});
于 2013-01-14T01:11:52.987 に答える
17

これを行う小さなデモを書きました...

$.datepicker の拡張機能を含むオブジェクト リテラルを作成し、$.datepicker とオブジェクトに対して $.extend を実行します。

ここで確認できます: http://jsfiddle.net/NHN4g/4/

拡張機能自体は次のとおりです。

(function($){
    var datepickerExtensions = {
        _oldAdjustDate: $.datepicker._adjustDate,
        _adjustDate: function(id, offset, period) { 
            var target = $(id);
            var inst = this._getInst(target[0]);
            var afterAdjustDate = this._get(inst, 'afterAdjustDate');
            this._oldAdjustDate(id, offset, period);
            if(afterAdjustDate && typeof afterAdjustDate === 'function'){
                afterAdjustDate(id, offset, period);
            }
        }
    }
    $.extend($.datepicker, datepickerExtensions);
})(jQuery);

そしてデモ：

(html)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">
<div class="demo">
    <p>Date: <input type="text" id="datepicker"></p>
</div><!-- End demo -->

(ジャバスクリプト)

var changed = false;
$("#datepicker").datepicker({ 
    afterAdjustDate: function(i,o,p){
        if(!changed){
            $('.ui-datepicker-month').css('color', '#f00');
        }
        changed = !changed;
    }
});
于 2011-08-23T21:19:44.923 に答える