如何擴展jQueryUI datepicker來接受額外的參數？

我喜歡jQueryUI datepicker是可自定義足以允許按鈕來觸發顯示datepicker，但不幸的是，它不允許您自定義您自己的標記。如何擴展jQueryUI 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/

這是一切都很好，但我真的想要做的是通過t他datepicker函數一個額外的參數，指定一個對象或選擇器指示什麼元素應該觸發顯示。

例如，我真的希望能夠做到這一點：

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

我知道如何擴展jQuery來添加方法和創建插件，但我不知道如何（或者如果它可能）修改現有函數中允許的參數。

有沒有人知道我可以如何擴展$.datepicker來實現我期望的目標或者至少將我指向正確的方向？任何幫助將非常感激。

來源

2011-10-12 Philip Walton

如何：

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/

來源

2011-10-12 00:27:32

謝謝安德魯，很好的回答！我很高興你展示了這兩種方法。 –

@PhilipWalton：沒問題！ –

@AndrewWhitaker：即使1.8中的datepicker不使用widget工廠，是否可以通過'$ .widget'實際擴展datepicker？這[SO回答]（http://stackoverflow.com/questions/2526592/how-to-subclass-a-specific-jqueryui-widget-method）似乎說不。 – superjos

不能擴展，因爲日期選擇器不使用的部件工廠，從而可以」用它來擴展它，但你可以覆蓋這些方法，並且可以注入你的代碼。有關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()

來源

2016-06-11 02:49:39

非常感謝......我正在撓頭，試圖理解爲什麼我的小部件擴展功能無法正常工作。 – VictorEspina

，定義必須遵循這種模式的方法的調用方法名稱：

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

，如果你需要調用需要的日曆實例的引用任何內部方法，你必須做到：

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

來源

2017-07-11 04:04:27 VictorEspina

如何擴展jQueryUI datepicker來接受額外的參數？

回答

相關問題