如何在 jQuery daterangepicker 中监听开始日期的变化答案

【问题标题】：How can I listen for start date change in jQuery daterangepicker如何在 jQuery daterangepicker 中监听开始日期的变化
【发布时间】：2018-04-02 18:59:33
【问题描述】：

当开始日期在 jQuery 的daterangepicker 中更改时（在单击“应用”按钮之前），我如何执行函数。

这是我的配置。

$('.someClass').daterangepicker({
  "alwaysShowCalendars": true,
  "startDate": fromDate,
  "endDate": toDate,
});

谢谢。

【问题讨论】：

标签： javascript jquery daterangepicker

【解决方案1】：

应该这样做...

$.fn.onStartDateChosen = function(cb){
  var t, el;
  $(this).on('show.daterangepicker', function(ev, picker) {
    var sd = $('td.start-date').data('title');
    t = setInterval(()=>{
      if(sd == $('td.start-date').data('title')) return;
      sd = $('td.start-date').data('title');
      if(!el || el !== sd){
        el = sd;
        cb(ev, picker);
      } 
    }, 10);
  });
  $(this).on('hide.daterangepicker', function(ev, picker) {
    clearInterval(t)
  });
}

这是一个例子......

$(function() {

  $.fn.onStartDateChosen = function(cb) {
    var t, el;
    $(this).on('show.daterangepicker', function(ev, picker) {
      var sd = $('td.start-date').data('title');
      t = setInterval(() => {
        if (sd == $('td.start-date').data('title')) return;
        sd = $('td.start-date').data('title');
        if (!el || el !== sd) {
          el = sd;
          cb(ev, picker);
        }
      }, 10);
    });
    $(this).on('hide.daterangepicker', function(ev, picker) {
      clearInterval(t)
    });
  }

  // Here's the example usage
  $('.someClass').daterangepicker({
    "alwaysShowCalendars": true,
    // rest of daterangepicker options....
  }).onStartDateChosen(function(picker) {
    // do something when the start date is changed
    console.log('start date changed');
  });

});

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<input type="text" class="someClass" value="" />

【讨论】：

感谢您的解决方案帮助了我。