DatePicker onchange 事件未在 jQuery 中触发答案

【问题标题】：DatePicker onchange event not firing in jQueryDatePicker onchange 事件未在 jQuery 中触发
【发布时间】：2015-09-23 08:10:09
【问题描述】：

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

现在我想在文本字段中填充结果时触发一个事件。 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();
    }
});

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

【问题讨论】：

您使用的是 input type="button" 而 JQuery datepicker 最适合常规文本输入字段。坦率地说，我不确定“按钮”输入类型是否存在，如果存在，它更像是提交按钮，而不是实际的输入字段。
但我需要使用按钮。
尝试将您的 jQuery 代码放入文档就绪事件中。 $( document ).ready(function() { // 这里 });
你能创建一个 jsfiddle 或 sn-p 吗？我们可以依靠它来看看究竟是什么不起作用？如果没有您正在使用的库，就很难看出问题所在。这是一个 jsfiddle，我确实在其中获得了点击事件，但显然我必须删除 datepicker 的东西 jsfiddle.net/ou8pryu3/2。
我找到了你的 datepicker 东西（jqueryui，对吗？），你的代码似乎可以工作 jsfiddle.net/ou8pryu3/3。您确定您没有忘记删除输入的disabled="disabled" 属性吗？显然，如果它被禁用，你将什么也得不到。

标签： javascript jquery datepicker

【解决方案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>

【讨论】：

change 事件看起来有点没用，而且使用它会阻止日期选择器自动关闭的事实让我有点不安。我更愿意在 onSelect 处理程序（或调用函数）中执行逻辑，这看起来更简单、更合适。
@QuentinRoy。当然如此。但是 OP 想使用它，所以我添加了它。我们可以在没有change 事件的情况下使用onSelect 实现相同的目标。
感谢您的努力。它在这里工作正常。但它不会触发我的代码。我正在使用这个 datetimepicker rainforestnet.com/datetimepicker/datetimepicker-tutorial.htm 我无法在小提琴上添加外部源。因此，我发布了链接。
还有许多其他日期时间选择器插件，例如this，它们现在都处于活动状态并定期更新。您正在使用的插件，我没有找到类似onselect 的选项。所以我建议，改变插件
如果这对你有帮助，那么你能接受吗回答@user123

【解决方案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);
                } 
            }
       })
})

【讨论】：

【解决方案3】：

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

【讨论】：