jQueryUI datepicker 小部件在小部件初始化后添加“onClose”功能答案

【问题标题】：jQueryUI datepicker widget add 'onClose' function after widget initializationjQueryUI datepicker 小部件在小部件初始化后添加“onClose”功能
【发布时间】：2013-03-07 11:06:51
【问题描述】：

假设我有一个#date 字段。起初我用一些选项来初始化它（目前它们并不重要）：

$('#date').datepicker(options);

然后，如果我尝试添加onClose 函数，我会这样做：

$('#date').datepicker({onClose: function(dateText, inst){console.log("Hello World");}});

但是，这会覆盖之前设置的选项。假设我无权访问这些选项 - datepicker 已初始化，选项已设置，现在我需要添加函数 onClose。怎么做？我试过.datepicker('option','onClose',function(){});没有效果。

【问题讨论】：

你应该只在一个id上初始化datepicker一次。如果你做多次，后者将覆盖第一个选项。是这样吗？
是的。这就是为什么我需要另一种方式来添加“onClose”功能。

标签： jquery jquery-ui datepicker

【解决方案1】：

试试看

$('#date').datepicker( 'option' , 'onClose', function() {} );

【讨论】：

【解决方案2】：

试试这个：

$('#date').datepicker();
...
$('#date').datepicker("option", {
  onClose: function(dateText, inst){console.log("Hello World");}
});

当然，这会覆盖您之前设置的 onClose 函数。来源：jQuery forum post

【讨论】：

【解决方案3】：

试试这个：

$('#date').datepicker().bind('onClose',function(){
    console.log("Hello World");
});

【讨论】：

其实这是最接近的解决方案。我已经修改了我的选项，以便它们触发事件，例如：onClose: function(dateText,inst){$(this).trigger("date_closed",[dateText, inst]} 然后我可以在任何我想要的地方使用这个触发器：$('#date').on('date_closed',function(dateText, inst){}); 不太整洁，但满足我的需求:)
可能因为'bind' is deprecated in favour of 'on' 和日期选择器有an option method 用于此用例而被否决。

【解决方案4】：

在初始化时将您的关闭功能定义为您的选项之一。这对我有用。

$('#date').datepicker({
    dateFormat: "dd/mm/yy",
    onClose: function(dateText, inst){console.log("Hello World");}
});

【讨论】：

不是在初始化期间：OP 想要在初始化之后执行它（例如使用the option method）。

【解决方案5】：

我也面临同样的问题，即旧的关闭功能被替换。经过大量搜索，我已经实现了自己的功能来处理这个问题。下面是代码sn-p

function addCloseFunctionToDatePicker(id, funHandler) {
    var $datePicker=$('#' + id);
    var prevhandler = $datePicker.datepicker('option', 'onClose');
    $datePicker.datepicker('option', {
        onClose: function (dateText, inst) {                    
            if (prevhandler) {
                prevhandler(dateText, inst);
            }
           funHandler(dateText, inst);                
        }            
    });    
}

调用机制：

 addCloseFunctionToDatePicker('myDatePicker', function(){ alert("I'm next method"); });

【讨论】：