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

Question

如何在 jQuery 的 daterangepicker 中更改开始日期时执行函数（在单击 "Apply" 按钮之前）。

这是我的配置。

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

谢谢。

Answer 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="" />

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

How can I listen for start date change in jQuery daterangepicker

javascript

jquery

daterangepicker