在 daterangepicker 中点击 "selected date" 时的回调函数

Question

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

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

当我 select 日历中的日期时，给定的回调函数被正确调用。但是，如果我 select 已经 selected 的活动日期，弹出窗口将关闭但不会调用回调函数。据我所知，当同一日期 selected.

时，没有提供任何触发功能的机会

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

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

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

Answer 1

您可以做的是将一个额外的事件绑定到您的输入，当您 select 一个选项时将调用该事件。请参阅以下代码（假设您输入的是带有 id demo 的元素）因为您已经使用了 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");
      );
    });
});

在 daterangepicker 中点击 "selected date" 时的回调函数

Callback function when clicked on "selected date" in daterangepicker

javascript

jquery

daterangepicker

twitter-bootstrap