单击日期范围选择器中的“选定日期”时的回调函数

Question

使用最新版本的Daterangepicker 进行引导

对于以下日历（他们网站中使用的标准示例）：

$('#demo').daterangepicker({
    "singleDatePicker": true,
    "autoApply": true,
    "startDate": "05/31/2017",
    "endDate": "06/06/2017"
}, function(start, end, label) {
  console.log("a date is selected")
});

当我在日历中选择一个日期时，会正确调用给定的回调函数。 但是，如果我选择已选择的活动日期，则弹出窗口将关闭，但不会调用回调函数。 据我所知，没有任何机会在选择相同的日期时才能触发函数。

所以，我的问题是：是否有一种黑客方法可以在选择相同日期时调用回调函数？

例如，我尝试了以下代码向活动单元格添加侦听器，但它也没有被触发：

 $('td.active.start-date.active.end-date.available').on('click', function () {
   console.log('the same date is selected')
 })

Answer 1

您可以做的是将一个额外的事件绑定到您的输入，当您选择一个选项时将调用该事件。 请参阅以下代码（假设输入id id的元素是您的输入）由于您已经使用jQuery，因此我的示例也使用了此代码：

$('#demo').on('change.datepicker', function(ev){
  var picker = $(ev.target).data('daterangepicker');
  console.log(picker.startDate); // contains the selected start date
  console.log(picker.endDate); // contains the selected end date 

  // ... here you can compare the dates and call your callback.
});

希望这会有所帮助！

Answer 2

'click' 事件不起作用，但 'mousedown' 事件起作用。

下面是一个示例，它标识单击的元素 ('td.available') 并以编程方式再次单击同一日期。

$('#demo').on('showCalendar.daterangepicker', function(ev, picker) {

    function triggerMouseEvent (node, eventType) {
        var clickEvent = document.createEvent ('MouseEvents');
        clickEvent.initEvent (eventType, true, true);
        node.dispatchEvent (clickEvent);
    }
    // when user selects ("mousedown") any date in the calendar:
    $('td.available').on("mousedown", function() {
        clickedElement = $('td.in-range')[0]; // this is the clicked element
        
        // example: programatically click again.
        triggerMouseEvent (clickedElement, "mouseover");
        triggerMouseEvent (clickedElement, "mousedown");
        triggerMouseEvent (clickedElement, "mouseup");
        triggerMouseEvent (clickedElement, "click");
      );
    });
});