在开始日期和结束日期引导日期时间选择器onChange事件

Question

在我的项目中，我获得了起始日期和结束日期的引导datetimepicker以及用于设置今天，上周以及所有时间的切换按钮。如下所示：

对于datetimepickers，我遇到了onChange事件，当用户更改开始日期或结束日期时，将触发ajax请求，并从服务器获取新数据。他的代码是这样的：

$("#datetimepickerFrom").on("dp.change", function (e) {                
    start_date = e.date;
    table.ajax.reload();
});

$("#datetimepickerTo").on("dp.change", function (e) {                
    end_date = e.date;
    table.ajax.reload();
});

因此问题如下：当用户单击上周的按钮时，它将今天的日期设置为结束时间datetimepicker，将日期设置为开始日期datepicker的7天。由于同时更改了2个datetimepicker，将两次触发ajax请求，这是不期望的行为。有什么想法可以避免这种情况，并在万一2 datetimepickers更改的情况下进行一次ajax调用？

此外，我需要为任何datetimepicker更改保留ajax调用，因为用户可以手动更改任何日期，并且应该请求新数据。

谢谢。

Answer 1

几分钟前，我迅速尝试了您的代码，一切似乎都正常。我已经实现了基本的jquery ajax调用。您也可以自己做。

<div class="container">
<div class='col-md-5'>
    <div class="form-group">
        <div class='input-group date' id='datetimepicker6'>
            <input type='text' class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>
<div class='col-md-5'>
    <div class="form-group">
        <div class='input-group date' id='datetimepicker7'>
            <input type='text' class="form-control"/>
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

jQuery部分

let datePicker = {
 'dateStart': null,
 'dateEnd': null
}

$(function () {
  $('#datetimepicker6').datetimepicker();
  $('#datetimepicker7').datetimepicker({
    useCurrent: false 
  });
  $("#datetimepicker6").on("dp.change", function (e) {
    $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
      datePicker['dateStart'] = new Date(e.date._d);
    });
    $("#datetimepicker7").on("dp.change", function (e) {
      $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
       datePicker['dateEnd'] = new Date(e.date._d);
       if(datePicker['dateEnd'] && datePicker['dateStart']){
         $.post("your_url", datePicker, function(result){
           console.log(result)
         });
       }
   });
 });