JQuery Datepicker OnSelect và TextChanged problem

Question

Kể từ khi thêm OnSelect vào Datepicker của tôi, sự kiện TextChanged không còn kích hoạt cho điều khiển này nữa. Mã của tôi là như sau:

$(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 khác của tôi (txtEndDate) TextChanged sự kiện nào lửa như vậy chỉ có thể đặt nó xuống OnSelect được định nghĩa cho sự kiểm soát txtStartDate.

Rất cảm kích mọi trợ giúp về vấn đề này. Chúc mừng!

Answer 1

Sau khi kiểm tra ngắn của jQuery UI datepicker Nguồn giải pháp là chỉ bắn sự kiện thay đổi bản thân

... 
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'); 
} 
... 

Lý do cho điều này là những dòng sau trong nguồn 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'); 

Như bạn có thể thấy jQuery UI Datepicker kích hoạt sự kiện change mỗi mặc định nếu trường hợp datepicker là trường input nhưng không kích hoạt nếu bạn chỉ định trình xử lý tùy chỉnh onSelect (như bạn đã làm).

Bạn có thể cho rằng đây thực sự là hành vi đúng vì nó đảm bảo cho bạn khả năng cấu hình tối đa. Bạn có thể quyết định xem bạn có muốn sự kiện change xảy ra hay không theo cách này.

Nhưng tôi đồng ý rằng hành vi này có thể cần được ghi lại.

Answer 2

Bạn chỉ có thể thêm

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

đến hết onSelect chức năng. Hãy xem xét ví dụ sau làm việc: http://jsbin.com/oqunu/ hoặc chỉnh sửa phiên bản http://jsbin.com/oqunu/edit

Hoặc di chuyển hoặc logic đến các chức năng được kích hoạt bởi TextChanged và loại bỏ onSelect. Như ở đây: http://jsbin.com/iyajo; chỉnh sửa phiên bản http://jsbin.com/iyajo/edit

Answer 3

Trong một mạch tương tự, tôi thấy rằng nếu bạn đính kèm DatePicker vào trường nhập văn bản và chỉ định .selectMultiple, thì hành vi lạ xảy ra. Cụ thể, khi bạn nhấp vào một ô đã chọn (để bỏ chọn nó), nó sẽ nhấp nháy nhưng vẫn được chọn. Điều này xảy ra bởi vì đầu tiên các tế bào không đi chọn, nhưng sau đó DatePicker ném một sự kiện 'thay đổi'. Sự kiện thay đổi sẽ biến ô hiện tại trở lại vì lịch được đính kèm với đầu vào văn bản!

Điều này có ý nghĩa, theo một cách: bạn có thể không nên gắn nhiều lựa chọn vào một hộp văn bản duy nhất. Nhưng hành vi này không có giấy tờ và khá khó để theo dõi trừ khi bạn đã biết cách DatePicker hiểu các hộp văn bản.