当另一个事件更改我的输入值时的事件侦听器

Question

我有一个带有datepicker类的输入，它看起来像这样：

<input class="ui-calendar hasDatepicker" type="text" name="date" id="date">

更改此输入值时，我需要涵盖所有情况。因此，我有一个.datepicker onSelect（当我通过日期选择器日历选择日期时使用）和简单的onChange（当我通过键盘输入日期时使用）事件：

$('#date').datepicker({
  onSelect: function() {
    console.log('datepicker onSelect event');
  }
});

和

$('#date').on('change', function() {
  console.log('onChange event');
});

现在的问题是我有单独的按钮：

<a href="#" onclick="setDate('date', '2018-12-05', '2018-12-05'); return false;">Set date</a>

此setDate函数更改我的日期选择器输入的值。

如何在不将任何代码放入setDate函数本身的情况下捕获此setDate事件？我尝试在datepicker输入上添加侦听器，但它只能捕获我通过键盘输入的值。

Answer 1

首先，不要使用on*事件属性，请毫不干扰地附加事件处理程序。

第二，您应该通过setDate()库使datepicker()更改日期，然后免费获得此行为：

<a href="#" class="set-date" date-foo="date" date-date1="2018-12-05" data-date2="2018-12-05">Set date</a>

$('.set-date').click(function(e) {
  e.preventDefault();
  $("#date").datepicker("setDate", $(this).data('date1'));
});

或者，您可以在输入上设置val()，并手动trigger()一个change事件。

$('.set-date').click(function(e) {
  e.preventDefault();
  $('#date').val($(this).data('date1')).trigger('change');
});