Datepicker变更事件问题：仅点击日历日期时触发Ajax请求

你的问题核心在于input和change事件的触发范围太广——不管是用户手动输入日期、用代码通过val()设置/获取值，都会触发这两个事件，这显然不是你想要的。

jQuery UI Datepicker提供了专门的onSelect回调函数，只有当用户从日历面板中选择日期时才会触发，完全符合你的需求。下面是修改后的代码：

$('.filter_date').datepicker({
  onSelect: function(dateText, inst) {
    var form_data = rank_data();
    if (form_data.length !== 0) {
      $.ajax({
        type: 'POST',
        url: '/visual/plot',
        dataType: 'json',
        data: {'form_data': JSON.stringify(form_data)},
        success: function(data){
          if (data !== false){
            // 这里处理你的成功回调逻辑
          }
        }
      });
    }
  }
});

关键说明： #

• onSelect会在用户点击日历中的任意日期时触发，第一个参数dateText是选中的日期字符串，第二个参数inst是Datepicker的实例对象（如果需要可以用来获取更多组件相关信息）。
• 这种方式完全避开了input和change事件的“误触发”场景：不管是用$('#start_date').val()获取值，还是用val()方法设置日期，都不会触发这个回调，只有用户主动选择日历日期才会执行Ajax请求。
• 如果你的两个日期选择器（start_date和end_date）都需要这个逻辑，上面的代码会同时绑定到所有带.filter_date类的元素上，完全适配你的场景。

内容的提问来源于stack exchange，提问作者Amal