javascript DatePicker onchange 事件未在 jQuery 中触发

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32734235/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 15:42:06  来源:igfitidea点击:

DatePicker onchange event not firing in jQuery

javascriptjquerydatepicker

提问by user123

I have a button and a textbox. Onclick of the button datepicker pop up appears and user selects a date from the calender pop up and the selected date is populated in the text field.

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

Now I want to fire an event when the result is populated on the textfield. Onchange event does not work for this as textfield onchange event is fired only if it loses focus. In my case it is changed from an external source.

现在我想在文本字段上填充结果时触发一个事件。Onchange 事件对此不起作用,因为只有在失去焦点时才会触发 textfield onchange 事件。在我的情况下,它是从外部来源更改的。

Hence I thought to fire an onSelect event for the button click. But again event is not triggered.

因此,我想为按钮单击触发 onSelect 事件。但是再次事件不会被触发。

here is my code

这是我的代码

<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();
    }
});

Here no event is triggered. Any help would be appreciated

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

回答by J Santosh

1.Open datepicker on text boxon clicking button , so you have to use id of text box , not button and a method $('#txt_node').datepicker('show');to show the datepicker.
2.If changeevent triggered , the datepicker will be kept open, it is not closed so the line $('#txt_node').datepicker('hide');

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

Check this.

检查这个。

$('#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>

回答by Silambarasan R.D

Simple uncomment $(this).change();this and It'll automatically work. This will tell the datepicker function to trigger Change()after selecting or Choosing a Date.

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

回答by ElPedro

I've done something similar using:

我已经使用以下方法做了类似的事情:

HTML

HTML

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

JavaScript

JavaScript

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