如何在jQuery daterangepicker中监听开始日期更改

时间:2018-04-02 18:59:34

标签: javascript jquery daterangepicker

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

这是我的配置。

{'_data': b'\x82Z\xc2\x8c\xf3\x00\x00\x00\x01Fxtime\x00x\x80\x00\x01b\x87\xf6\x97\xb1d_id\x00dZ\xc2\x8c\xf3`\x88\x05\x00\x01\x98\xa4\xd8\x00Z\x10\x04\xac\x1eBC{\xf5E\xc4\xa0\xd8\x89\xca\x830\x99\x9e\x04'}

谢谢。

1 个答案:

答案 0 :(得分: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="" />