Jquery UI 多日期选择器选择答案

【问题标题】：Jquery UI Multiple Datepicker selectionJquery UI 多日期选择器选择
【发布时间】：2016-04-05 11:50:18
【问题描述】：

嗨，我有几个日期选择器都属于同一类 .datepicker 我有一个函数可以执行任何日期选择器的 onSelect。但是，我想在选择特定日期选择器时执行另一个函数

原始日期选择器类

 $(".datepicker").datepicker({

            dateFormat: 'yy-mm-dd',
            showButtonPanel: true,
            onSelect: function (date_check) { }

})

我的特定目标日期选择器也包含日期选择器类。

$("#myDate").datepicker({

                dateFormat: 'yy-mm-dd',
                showButtonPanel: true,
                onSelect: function (date_assign) { }

    })

我的问题是：

有没有办法我可以使用.datepicker 类来定位特定的日期选择器，以对该特定的日期选择器执行辅助 onSelect 函数。还是有别的办法？

*NB 日期选择器必须能够执行.datepicker 类下的原始功能和新功能。

更新

<input class="datepicker" id="a"> </input>
<input class="datepicker" id="b"> </input>
<input class="datepicker" id="myDate"> </input>

在选择 a 或 b 或 myDate 时运行原始的 .datepicker onSelect 函数

在选择 myDate 时，运行原始的 .datepicker onSelect 并运行单独的 onSelect 函数。

【问题讨论】：

标签： javascript jquery-ui datepicker

【解决方案1】：

创建一个自定义事件然后触发它，将参数从选择传递到自定义事件：

$('#myDate').on('customevent', function(e, dateText, inst) {
  alert('custom triggered' + dateText);
});
$(".datepicker").datepicker({
  dateFormat: 'yy-mm-dd',
  showButtonPanel: true,
  onSelect: function(dateText, inst) {
    if ($(this).is('#myDate')) {
      $('#myDate').trigger("customevent", [dateText, inst]);
    }
    // do universal code
    alert('Date:' + dateText);
  }
});

在这里玩一下：https://jsfiddle.net/MarkSchultheiss/3grqL8c9/

【讨论】：

【解决方案2】：

您可以检查选项 onSelect 是否已分配，如果已分配，请将其添加到函数中

var onSelectFn = $("#myDate").datepicker( "option", "onSelect")
$("#myDate").datepicker({
                dateFormat: 'yy-mm-dd',
                showButtonPanel: true,
                onSelect: function (date_assign) { 
                     if(typeof onSelectFn === 'function') onSelectFn();
                     // do the next function
                }

    })

更新

为了更新#myDate 选择器的onSelect 属性，您需要像这样工作

第一个datePicker所有.datepicker元素都像这样

$(".datepicker").datepicker({
                dateFormat: 'yy-mm-dd',
                showButtonPanel: true,
                onSelect: function (date_assign) { 
                     if(typeof onSelectFn === 'function') onSelectFn();
                     // do the next function
                }

    })

然后更新#myDate的onSelect

$("#myDate").datepicker( "option", "onSelect",function(data_assign){
  // your new functionality 
})

这应该可以解决问题:)

【讨论】：

对不起，如果“#myDate”元素被“选中”，这是否只会运行第二个函数？
不，它会同时运行它们，你想禁用第一个并运行另一个？
好的，但我只想在选择“#myDate”日期选择器时运行第二个函数。我将尝试在我的问题中提供示例。查看我的更新，看看这是否解释了我想要实现的目标。
它似乎没有做我想做的事。选择任何日期选择器都可以执行其功能。但是选择 #myDate 日期选择器不会执行第二个函数。

【解决方案3】：

我设法回答了我自己的问题：

$(".datepicker").datepicker({
            dateFormat: 'yy-mm-dd',
            showButtonPanel: true,
            onSelect: function (date_check) {

            //DO SOME FUNCTION STUFF

           if($(this).attr('id') == "myDate") {

            //DO SOME EXTRA STUFF

           }
      }
});

工作原理

每个 datepicker 都使用 .datepicker 类并执行第一个功能，但是当您单击 #myDate datepicker 时，它会根据 jquery UI Datepicker API 获取 $(this) 的 id 属性：

onSelect 函数

选择日期选择器时调用。该函数接收选择日期作为文本，日期选择器实例作为参数。 this 指关联的输入字段。

所以this 为您获取当前点击的日期选择器。然后您可以将 ID 与您希望它匹配的元素进行比较，然后执行您的第二个功能。

【讨论】：