追加の引数を受け入れるためにjQueryUIのdatepickerを拡張するにはどうすればよいですか？

Question

jQueryUI datepickerは、ボタンがdatepickerを表示するようトリガできるようにカスタマイズ可能ですが、残念ながら、独自のマークアップをカスタマイズすることはできません。

私はそうのようにマークアップしている場合：

<span> 
    <input type="text" class="datepicker" /> 
</span> 
<span> 
    <button class="datepicker-trigger">Open</button> 
</span> 

それをボタンをクリックしたときに、私は次のコードを実装する必要があると思います表示する日付ピッカーを得るために：

$('.datepicker').datepicker({ 
    showOn:'none' 
}); 
$('.datepicker-trigger').click(function() { 
    $('.datepicker').datepicker('show'); 
}); 

はここです上記のコードのjsFiddle：http://jsfiddle.net/P9Qmu/

これはすべてが順調と良いですが、私は本当にやりたいするパストンであります彼は、datepicker関数は、どの要素が表示をトリガする必要があるかを示すオブジェクトまたはセレクタを指定する追加の引数です。

例えば、私は本当にこれを実行できるようにしたいと思います：

$('.datepicker').datepicker({ 
    showOn:'none', 
    trigger:'.datepicker-trigger' 
}); 

私はメソッドを追加し、プラグインを作成するためのjQueryを拡張する方法を知っているが、私はそれはだか（またはかどうかわからないんだけど既存の関数で許可された引数を変更することができます。

誰も私がやっていることを達成するために$.datepickerを拡張する方法を知っていますか、少なくとも正しい方向に向いていますか？どんな助けでも大歓迎です。

Answer 1

方法について：

var __picker = $.fn.datepicker; 

$.fn.datepicker = function(options) { 
    __picker.apply(this, [options]); 
    var $self = this; 

    if (options && options.trigger) { 
     $(options.trigger).bind("click", function() { 
      $self.datepicker("show"); 
     }); 
    } 
} 

用途：

$("#date").datepicker({ 
    trigger: "#button" 
}); 

$("#date2").datepicker({ 
    trigger: "#button2" 
}); 

例：http://jsfiddle.net/gduhm/

---

または、独自のjQueryプラグインとあまり侵入的：

$.widget("ui.datepicker2", { 
    _init: function() { 
     var $el = this.element; 
     $el.datepicker(this.options); 

     if (this.options && this.options.trigger) { 
      $(this.options.trigger).bind("click", function() { 
       $el.datepicker("show"); 
      }); 
     } 
    } 
}); 

（使用datepicker2または何を除いて同様の用法、あなたはそれに名前を付ける）

例：http://jsfiddle.net/puVap/

Answer 2

DatePickerのウィジェットファクトリを使用していないので、あなたが拡張することはできませんので、あなたができます」それを拡張するために使用しますが、メソッドをオーバーライドしてコードを挿入することができます。 Jquery UI Datepickerがチェックを使用するメソッドの完全なリストについては、datepicker.jsまたはjquery-uiを参照してください。JS

カスタムJSファイルにそのコードをシンプル追加することができますし、オーバーライドした後、あなたがこの方法のために、このパターンに従わなければならない呼び出し可能なメソッドを定義するために、念のために通常の

$.datepicker._selectDay_old = $.datepicker._selectDay; 
$.datepicker._selectDay = function(id, month, year, td) { 
    this._selectDay_old(id, month, year, td); 
    // Your code here 
    console.log("Injected Custom Method"); 
} 

// Call Datepicker after Injecting code 
$("#datepicker").datepicker() 

Answer 3

として日付ピッカー呼び出すことができます名前：

_<methodName>Datepicker(target, param1, param2,...,paramN) 

、あなたはカレンダーのインスタンスへの参照を必要とする内部メソッドを呼び出す必要がある場合は、あなたが行う必要があります。

var inst = this._getInst(target); 
this._internalMethod(inst);