JQuery Datepicker OnSelect и проблема с TextChanged

Question

С момента добавления OnSelect к моему Datepicker событие TextChanged больше не срабатывает для этого элемента управления. Мой код выглядит следующим образом:

$(function() { 
    $("#<%=txtStartDate.ClientID %>").datepicker({ 
     minDate: 0, 
     dateFormat: 'dd-M-yy', 
     onSelect: function(dateText, inst) { 
      var theDate = new Date(Date.parse($(this).datepicker('getDate'))); 
      $("#<%=txtEndDate.ClientID %>").datepicker('option', 'minDate', theDate); 
     } 
    }); 

    $("#<%=txtEndDate.ClientID %>").datepicker({ 
     dateFormat: 'dd-M-yy' 
    }); 
}); 

<%-- etc ---- %> 

<asp:TextBox ID="txtStartDate" runat="server" AutoPostBack="true" OnTextChanged="txtStartDate_TextChanged"></asp:TextBox> 

Мой другой DatePicker (txtEndDate) TextChanged событие делает огонь так может только положить его в OnSelect определяется для управления txtStartDate.

Большое спасибо за любую помощь по этому вопросу. Ура!

Answer 1

После короткой проверки JQuery UI Datepicker источники решение просто огонь события изменения сами

... 
onSelect: function(dateText, inst) { 
    var theDate = new Date(Date.parse($(this).datepicker('getDate'))); 
    $("#<%=txtEndDate.ClientID %>").datepicker('option', 'minDate', theDate); 
    if (inst.input) 
     inst.input.trigger('change'); 
} 
... 

Причиной этого являются следующие строки в источнике JQuery UI Datepicker

if (onSelect) 
    // trigger custom callback 
    onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]); 
else if (inst.input) 
    // fire the change event 
    inst.input.trigger('change'); 

Как вы можете видеть, jQuery UI Datepicker запускает событие change по умолчанию, если экземпляр datepicker является полем input, но не запускает его, если вы указали пользовательский обработчик onSelect (как и вы).

Вы можете утверждать, что на самом деле это правильное поведение, так как оно гарантирует максимальную конфигурацию. Вы можете решить, хотите ли вы, чтобы событие change произошло или нет.

Но я согласен с тем, что это поведение может быть документировано.

Answer 2

Вы можете просто добавить

$('<%=txtStartDate.ClientID %>').trigger('change');

до конца onSelect функции. Рассмотрим рабочий пример: http://jsbin.com/oqunu/ или изменить версию http://jsbin.com/oqunu/edit

Или переместите или логику в функции, вызванные TextChanged и избавитесь от onSelect. Как здесь: http://jsbin.com/iyajo; edit version http://jsbin.com/iyajo/edit

Answer 3

В том же ключе я обнаружил, что если вы присоедините DatePicker к текстовому полю ввода и укажите .selectMultiple, произойдет странное поведение. В частности, когда вы нажимаете на уже выбранную ячейку (чтобы отменить выбор), она мерцает, но остается выбранной. Это происходит потому, что сначала ячейка не отменяется, но затем DatePicker выдает событие «change». Событие изменения возвращает текущую ячейку, потому что календарь подключен к текстовому вводу!

Это имеет смысл, в некотором смысле: вы, вероятно, не должны вставлять множественные выделения в одно текстовое поле. Но поведение недокументировано и довольно сложно отслеживать, если вы уже не знаете, как DatePicker понимает текстовые поля.