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.单击按钮时在

text box

上打开日期选择器，因此您必须使用文本框的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>

Answer 2

我已经做了类似的事情：

HTML

<input type="text" id="NewDate" style="display:none" />

JavaScript

jQuery(function($){
    $('#NewDate').datepicker( 
        {
        showOn: 'button', 
        buttonImageOnly: true, 
        buttonText:"", 
        buttonImage: 'img/calendar.png', 
        onClose: function(date) { 
            if(date !="") {
                alert(date);
                } 
            }
       })
})

Answer 3

简单取消注释 $(this).change(); this 就会自动工作。这将告诉日期选择器函数在选择或选择日期后触发Change()。

Answer 4

为此我使用 onSelectedDateChanged={handleChange} handleChange是我处理表单数据更改的函数 // 处理来自（Datepicker flowbite 组件）的日期情况

const handleChange = (target) => {
    // handle date case from deadline input (Datepicker component) 
    if (target instanceof Date) {
        setValues({
            ...values,
            deadline: format(target, 'MMMM dd, yyyy')
        });
        testRegExp({ name: 'deadline', value: target });
        return null;
    }
    // handle text input case
    const { name, value } = target;
    setValues({
        ...values,
        [name]: value
    });
    testRegExp(target);
}

__ 在我使用的其他输入中：

onChange={e => handleChange(e.target)}

---

希望这对您有帮助。