Jquery: keyup-input 没有检测到日期选择器的变化

Question

我想用 jquery 编写实时搜索 (mysql) 代码。有四个搜索参数（姓氏、名字、开始日期、结束日期），它们应根据所有框中的输入执行实时搜索 (AND)。使用日期选择器小部件选择日期。

虽然我的代码可以很好地处理名字和姓氏，但输入字段上的 .keyUp() 无法识别添加和更改的日期（但会显示在输入字段中）。

如何在不破坏名称的情况下使日期正常工作？

脚本（放在文档末尾）：

 -- plain html stripped --
 lastname <input id="lastname" type="text" name="lastname" />
 <br />
 forename <input id="forename" type="text" name="forename" />
 <br />
 startdate <input id="startdate" type="text" name="startdate" />
 <br />
 enddate <input id="enddate" type="text" name="enddate" />    

<script>
$(function() {
      var dateOptions = {
            showMonthAfterYear: false,
            showOn: 'both',
            yearRange: "-40:+10",
            changeYear: true,
            changeMonth: true,
        };  
$( "#startdate" ).datepicker(dateOptions);
$( "#enddate" ).datepicker(dateOptions);
});
</script>
<script>
$('input').keyup(function () {
var inputData = [];
$('input').map(function () {
    inputData.push({"name" : this.name, "value" : this.value});
}).get();

$.ajax({ 
    type: "POST",
    url: "dbquery.php",             
    data: inputData,
    dataType: "html", 
    success: function(response){                    
        $("#responsecontainer").html(response); 
        return response;
    }});
});

Answer 1

不会在 datePicker 上触发按键事件，因为您不使用键盘与其交互。改为监听 change 事件（/以及）：

替换： $('input').keyup(function () {...

和$(':input').on("keyup change", function () {...

Answer 2

使用日期选择器的目的是避免手动输入日期，因为这有很多问题，包括日期格式、验证等。因此您不应该为它们使用关键事件。事实上，考虑在这些输入上使用只读属性。

请参阅 datepicker.onSelect() 获取所选日期：

http://api.jqueryui.com/datepicker/#option-onSelect

在我看来，最简单的方法是在执行 AJAX 调用之前 assemble 所有数据，而不是使用事件。在这种情况下，您将使用 getDate() 函数：

http://api.jqueryui.com/datepicker/#method-getDate

Answer 3

除了 moob 的答案之外，您还可以使用 jQuery 的 .change() 事件 - .on( "change", handler )

的快捷方式

https://api.jquery.com/change/

Jquery: keyup-input 没有检测到日期选择器的变化

Jquery: keyup-input does not detect change from datepicker

jquery

dictionary

input

datepicker