web-dev-qa-db-ja.com

jQueryDatePickerにコールバックを追加する適切な方法

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はクラスの変更を継承するほど賢くありません。したがって、日付を変更した後、コールバックが必要です。

javascriptjqueryjquery-uijquery-callbackjquery-ui-datepicker
18
vol7ron

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

$ .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 -->

（javascript）

var changed = false;
$("#datepicker").datepicker({ 
    afterAdjustDate: function(i,o,p){
        if(!changed){
            $('.ui-datepicker-month').css('color', '#f00');
        }
        changed = !changed;
    }
});
16
gislikonrad

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

$('.datepicker').datepicker({
  onSelect: function(selectedDate) {
    // custom callback logic here
    alert(selectedDate);
  }
});
34
undeniablyrob

Datepicker v1.0.0では、pickオプションを使用できます。

    var date = new Date();
    $('.datepicker-trigger').datepicker({
        format: 'mm/dd/yyyy',
        autoPick: false,
        startDate: date.getDate(),
        changeMonth: false,
        changeYear: false,
        autoHide: true,
        pick: function (selectedDate) {
            console.log(selectedDate);
        }
    });
0
jrenouard

ソースファイルを開くと、default_optionsで使用できるコールバック関数がいくつかあることがわかります。

        onSelectDate: function () {},
        onSelectTime: function () {},
        onChangeMonth: function () {},
        onGetWeekOfYear: function () {},
        onChangeYear: function () {},
        onChangeDateTime: function () {},
        onShow: function () {},
        onClose: function () {},
        onGenerate: function () {},
0
Kyle Bing