DatePicker事件并不总是触发

时间:2014-06-17 22:04:45

标签: jquery jquery-ui jquery-ui-datepicker

我的表单上有一个jQuery DatePicker控件,每次选择一个新日期时我都需要触发一个事件。我使用onSelect,在大多数情况下都有效。但是,如果我手动输入日期然后使用TAB键移动到下一个字段,则事件不会触发。

以下是示例代码:

HTML:

<input id="datePicker" type="text" />

使用Javascript:

$(function() {
    $('#datePicker').datepicker({
        onSelect: function() {
            alert('test');
        }
    });
});

这是a fiddle。尝试跳出日期选择器,你会看到我正在谈论的问题。

1 个答案:

答案 0 :(得分:0)

似乎只能通过鼠标点击日期选择器来触发onSelect。以下是一个选项,您可以使用它来为上面提到的情况另外触发事件。

var typing = false;

$(function() {
    $('#datePicker').datepicker({
        onSelect: function() {
            typing = false;
            console.log('test1');
        },
        onClose: function() {
            if(typing){
                typing = false;
                console.log('test2');
            } 
        }
    });
    $('#datePicker').keydown(function(e){
        if(e.which != 9)
            typing = true;
    });
});

Fiddle

我想到的另一个选择,如果你只是想避开所有情况并且你知道你的用户不会在几年后选择日期,你可以阻止用户完全输入字段,例如:

$(function() {
    $('#datePicker').datepicker({
        onSelect: function() {
            alert('test');
        }
    });
    $('#datePicker').keydown(function(){
        return false;
    });
});