javascript - DatePicker onchange 事件未在 jQuery 中触发

Question

我有一个按钮和一个文本框。单击按钮时会出现日期选择器弹出窗口，用户会从日历弹出窗口中选择一个日期，所选日期将填充到文本字段中。

现在我想在结果填充到文本字段时触发一个事件。 onchange 事件对此不起作用，因为文本字段 onchange 事件仅在失去焦点时才会触发。在我的例子中，它是从外部源更改的。

因此我想为单击按钮触发一个 onSelect 事件。但事件没有再次触发。

这是我的代码

<input type="text" class="textbox_small" name=""
            value="" id="txt_node" disabled="disabled"
            onchange="fnChangeTime();" />
<input type="button" name="" value=""
            class="timePicker_button" id="lnk_hpd"
            ; style="background-image: url('images/Date_time_picker.gif'); width: 29px; height: 20px;"
            onclick="" onselect="" "disabled"/></td>

$('#'+fnParseIDForJ('lnk_hpd')).click(function () {
             NewCssCal('txt_node','ddmmyyyy','arrow',false, null, null, null, fnInterimSave, 'txt_node');

    });
$('#lnk_hpd').datepicker({
    onSelect:function(datesel){
    alert("hello");
   //   alert("Selected date: " + dateText + "; input's current value: " + this.value);
     // $(this).change();
    }
});

这里没有事件被触发。任何帮助将不胜感激

Answer 1

1.点击按钮在文本框上打开日期选择器，所以你必须使用文本框的id，而不是按钮和方法$('#txt_node').datepicker(' show'); 来显示日期选择器。
2.如果 change 事件触发，日期选择器将保持打开状态，不会关闭，所以行 $('#txt_node').datepicker('hide');

检查这个。

$('#txt_node').datepicker({
  onSelect: function(datesel) {
    $('#txt_node').trigger('change')
  }
});
$('#lnk_hpd').click(function() {
  $('#txt_node').datepicker('show');
})

$('#txt_node').change(

  function(event) {
    $('#SelectedDate').text("Selected date: " + this.value);
    $('#txt_node').datepicker('hide'); // if youdon't hide datepicker will be kept open

  })

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<input type="text" class="textbox_small" name="" value="" id="txt_node" disabled="disabled" onchange="fnChangeTime();" />
<input type="button" name="" class="timePicker_button" id="lnk_hpd" ; onclick="" onselect="" "disabled" value='Open' />
<br/>
<br/>
<span id='SelectedDate'></span>