Question

我有一个包含多个模块的应用程序，这些模块需要与单个datepicker实例集成。因此，例如，当调用onChangeMonthYear时，我想触发：

moduleA.onChangeMonthYear 
moduleB.onChangeMonthYear 
moduleC.onChangeMonthYear

日期选择器on [x]函数似乎并不是设计用来执行此操作的，但是也许我缺少了一些东西。换句话说，我想将on [x]函数用作事件。

有人找到这种情况的解决方案吗？如果可以，您能否提供一些链接或示例？

如果答案是否定的，...我正在尝试调用DatepickerCallstack进行注册，该注册了匿名回调并从datepicker on [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>

有没有办法将datepicker函数用作事件

1 个答案: