Есть ли способ использовать функции DatePicker в качестве событий

Question

У меня есть приложение с несколькими модулями, которые необходимо интегрировать с одним экземпляром DatePicker.Так, например, когда вызывается onChangeMonthYear, я хочу запустить:

moduleA.onChangeMonthYear 
moduleB.onChangeMonthYear 
moduleC.onChangeMonthYear

Не похоже, что средство выбора даты на [x] предназначено для этого, но, возможно, я что-то упустил.Другими словами, я хочу использовать функции on [x] как события.

Кто-нибудь нашел решение для этого сценария?Если да, можете ли вы предоставить некоторые ссылки или примеры?

Если ответа нет ... Я экспериментирую с чем-то, что я вызываю DatepickerCallstack, который регистрирует анонимные обратные вызовы и выполняется из средства выбора даты на [x] настройка.Это работает в течение нескольких итераций, затем происходит нечто странное.Это почти похоже на проблему с внутренней ссылкой.Пока что это происходит только с beforeShowDay.Я вижу в ходе отладки / проверки консоли, что аргументы, переданные в обратный вызов, верны, но jQuery не согласен: Uncaught TypeError: Невозможно прочитать свойство '0' из неопределенного

function DatepickerCallStack() {
    this.callstack = {
        onChangeMonthYear: {},
        beforeShow: {},
        beforeShowDay: {},
        onSelect: {},
        onClose: {}
    };
}

DatepickerCallStack.prototype = {
    constructor: DatepickerCallStack,
    register: function(event, callback, reference) {

        if (typeof event !== 'string' || event === '') {
            throw Error("Invalid event argument.");
        } else if (!this.callstack.hasOwnProperty(event)) {
            throw Error("Unsupported event: " + event);
        }

        if (typeof callback !== 'function') {
            throw Error("Invalid callback argument.");
        }

        if (reference) {
            if (reference !== 'string' || reference === '') {
                throw Error("Invalid reference argument.");
            }
        } else {
            reference = 'callback' + Object.size(this.callstack[event]).toString();
        }

        this.callstack[event][reference] = callback;

    },
    unregister: function(event, reference) {
        if (typeof event !== 'string' || event === '') {
            throw Error("Invalid event argument.");
        } else if (!this.callstack.hasOwnProperty(event)) {
            throw Error("Unsupported event: " + event);
        }

        if (reference !== 'string' || reference === '') {
            throw Error("Invalid reference argument.");
        } else if (!this.callstack[event].hasOwnProperty(reference)) {
            throw Error("Reference does not exists: " + reference);
        }

        delete this.callstack[event][reference];
    },
    execute: function(event, args) {
        if (Object.size(this.callstack[event]) === 0) {
            switch(event) {
                case 'beforeShowDay':
                    return [true, ''];
                case 'beforeShow':
                    return {};
                case 'onChangeMonthYear':
                case 'onSelect':
                case 'onClose':
                    return;
            }
        }

        var self = this,
            result;

        Object.keys(this.callstack[event]).forEach(function(reference) {
            var callback = self.callstack[event][reference];
            switch(event) {
                case 'beforeShowDay':
                    result = callback(args.date);
                    return (typeof result === 'object') ? result : [true, ''];
                case 'beforeShow':
                    result = callback(args.input, args.inst);
                    return (typeof result === 'object') ? result : {};
                case 'onChangeMonthYear':
                    callback(args.year, args.month, args.inst);
                    break;
                case 'onSelect':
                    callback(args.dateText, args.inst);
                    break;
                case 'onClose':
                    callback(args.dateText, args.inst);
                    break;
            }
        });
    }
};

Вот как оно инициализируется ...

window.DPCS = new DatepickerCallStack;

var dp_settings = {
        beforeShow: function(input, inst) {
            return window.DPCS.execute('beforeShow', {input:input, inst:inst});
        },
        beforeShowDay: function(date) { 
            return window.DPCS.execute('beforeShowDay', {date:date});
        },
        onChangeMonthYear: function(year, month, inst) {
            window.DPCS.execute('onChangeMonthYear', {year:year, month:month, inst:inst});
        },
        onSelect: function(dateText, inst) {
            window.DPCS.execute('onSelect', {dateText:dateText, inst:inst});
        },
        onClose: function(dateText, inst) {
            window.DPCS.execute('onClose', {dateText:dateText, inst:inst});
        },
        dateFormat:'mm-dd-yy'
    };

window.DPCS.register('onChangeMonthYear', customOnChangeMonthYear);
window.DPCS.register('beforeShowDay', customBeforeShowDay);

Спасибо.

Answer 1

Это может помочь вам.Вам необходимо установить динамический вызов events в различных сценариях с использованием следующего:

$('#datepicker').datepicker( 'option' , 'onChangeMonthYear', function (date) {
    //code goes here
});

Пример:

$( "#datepicker" ).datepicker();

function A() { console.log("A"); }
function B() { console.log("B"); }

document.querySelector("#a").addEventListener("click",function(){
    $('#datepicker').datepicker( 'option' , 'onChangeMonthYear', function (date) {
        A();
    });
});

document.querySelector("#b").addEventListener("click",function(){
    $('#datepicker').datepicker( 'option' , 'onChangeMonthYear', function (date) {
        B();
    });
});

document.querySelector("#c").addEventListener("click",function(){
    $('#datepicker').datepicker( 'option' , 'onChangeMonthYear', function (date) {
        A();
        B();
    });
});

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<input type="text" id="datepicker">
<br>
<button id="a">Set scenario A : Calls function A</button>
<button id="b">Set scenario B : Calls function B</button>
<button id="c">Set scenario C : Calls functions A & B</button>