Question

您好我在同一类.datepicker下有几个日期选择器我有一个执行任何日期选择器onSelect的功能。但是我想在选择特定日期选择器时执行另一个函数我试图对特定的日期选择器进行单独的日期选择器分配我想要一个单独的函数但似乎无法让它工作

原始Datepicker类

 $(".datepicker").datepicker({

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

})

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

$("#myDate").datepicker({

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

    })

我的问题是：

有没有办法可以使用.datepicker类定位特定的日期选择器，以便为该特定的日期选择器执行辅助onSelect功能。或者有不同的方式吗？

* NB datepicker必须能够执行.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函数。

Answer 1

创建自定义事件，然后触发该事件，将参数从select传递到自定义事件：

$('#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/

Answer 2

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

$(".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 Function

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

因此this可以获取当前点击的日期选择器。然后你可以将ID与你想要匹配的元素进行比较，然后再做第二个功能。

Jquery UI多个Datepicker选择

2 个答案: