twitter-bootstrap bootstrap-datepicker 不选择输入的更改事件

bootstrap-datepicker not picking change event on input

提问by opensas

I have an input in which I want to edit a date. When the value of the input changes, I want to execute a callback.

我有一个要编辑日期的输入。当输入的值发生变化时，我想执行一个回调。

If I call the function datepicker (from bootstrap-datepicker https://github.com/eternicode/bootstrap-datepicker) I can no longer hook to the change event. (Strange enough, other events seem to work ok)

如果我调用函数 datepicker（来自 bootstrap-datepicker https://github.com/eternicode/bootstrap-datepicker），我将无法再挂钩更改事件。（很奇怪，其他事件似乎工作正常）

This is what I tried so far:

这是我到目前为止尝试过的：

(using backbone)

（使用主干）

events: {
  'changeDate :input' : 'onUpdateField'
},

or using directly jquery

或者直接使用jquery

$('#Fundacion').on('change', this.onUpdateField);

If I just comment the following line

如果我只是评论以下行

$('#Fundacion').datepicker({
  autoclose : true,
[...]

The event is called.

事件被调用。

On the other hand, the changeDate evet is called, but only when the date is changed using the mouse or the arrows. I want to catch the event when the user just types a different date.

另一方面，changeDate evet 被调用，但仅当使用鼠标或箭头更改日期时。我想在用户输入不同的日期时捕获该事件。

I tried having a look at the source (https://github.com/eternicode/bootstrap-datepicker/blob/master/js/bootstrap-datepicker.js) but I couldn't find where it might be "swallowing" the change event.

我尝试查看源代码（https://github.com/eternicode/bootstrap-datepicker/blob/master/js/bootstrap-datepicker.js）但我找不到它可能“吞下”更改的位置事件。

回答by Omar Tariq

This is not a recommended way, but a dirty workaround. Just keep checking for the date field after 500 milliseconds (or as per your requirements).

这不是推荐的方法，而是一种肮脏的解决方法。只需在 500 毫秒后继续检查日期字段（或根据您的要求）。

var current = $('.transaction-date').val();
function keep_checking() {

    if (current != $('.transaction-date').val()) {
        alert('change happened');
        current = $('.transaction-date').val();
    }
    setTimeout(keep_checking, 500);
}
keep_checking();

UPDATE

更新

If you use the following library then it'll fire an event 'changeDate' when the date is changed. Look and feel is very similar to the eternicode datepicker

如果您使用以下库，那么它会在日期更改时触发事件“changeDate”。外观与 eternicode datepicker 非常相似

http://www.eyecon.ro/bootstrap-datepicker/

http://www.eyecon.ro/bootstrap-datepicker/

Example usage:

用法示例：

jQuery('#dp1').datepicker().on('changeDate', function(ev){
     alert('date is changed');
});

回答by Agrest

In my case it was enough to do two simple steps:

就我而言，做两个简单的步骤就足够了：

1. Add change event listener to input (it will catch the event when the user types a different date)

   $('#dateInput').on(change, doSomethingOnChange);
   

2. Add datepicker changeDate event (it will trigger change event from first step when date is changed using the mouse or arrows)

   input.datepicker().on('changeDate', function(){
       $(this).trigger('change');
   });
   

1. 向输入添加更改事件侦听器（当用户键入不同的日期时，它将捕获事件）

   $('#dateInput').on(change, doSomethingOnChange);
   

2. 添加 datepicker changeDate 事件（当使用鼠标或箭头更改日期时，它将从第一步触发更改事件）

   input.datepicker().on('changeDate', function(){
       $(this).trigger('change');
   });
   

回答by opensas

not sure if it answers the question, but the issue seems to be known

不确定它是否回答了问题，但问题似乎是已知的

apparently they couldn't yet find a way to tell if the value has been changed or not when leaving the input focus.

显然，他们还无法找到一种方法来判断在离开输入焦点时值是否已更改。

check:

查看：

https://github.com/eternicode/bootstrap-datepicker/pull/295https://github.com/eternicode/bootstrap-datepicker/issues/241

https://github.com/eternicode/bootstrap-datepicker/pull/295 https://github.com/eternicode/bootstrap-datepicker/issues/241