Как я могу расширить jQueryUI datepicker, чтобы принять дополнительный аргумент? - PullRequest
Новая
       5

Как я могу расширить jQueryUI datepicker, чтобы принять дополнительный аргумент?

9 голосов
/ 12 октября 2011

Мне нравится, что 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, чтобы достичь того, что я ищу, или, по крайней мере, указать мне,в правильном направлении?Любая помощь будет высоко ценится.

Ответы [ 3 ]

16 голосов
/ 12 октября 2011

Как насчет: 

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/

0 голосов
/ 11 июля 2017

На всякий случай, чтобы определить вызываемый метод, вы должны следовать этому шаблону для имени метода: 

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

и если вам нужно вызвать любой внутренний метод, который требует ссылки на экземпляр календаря, вы должны сделать: 

var inst = this._getInst(target);
this._internalMethod(inst);
0 голосов
/ 11 июня 2016

Вы не можете расширять, потому что средство выбора даты не использует фабрику виджетов, и поэтому вы не можете использовать ее для расширения, но вы можете переопределить методы и внедрить ваш код. Для получения полного списка методов, которые использует Jquery UI Datepicker, проверьте datepicker.js или jquery-ui.js

Вы можете просто добавить этот код в свой файл Custom JS, а после переопределения вы можете вызвать DatePicker как обычно 

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