JQuery Datepicker OnSelect et TextChanged problème

Question

Depuis l'ajout d'un OnSelect à mon Datepicker, l'événement TextChanged ne se déclenche plus pour ce contrôle. Mon code est le suivant:

$(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> 

Mon autre datepicker (txtEndDate) événement TextChanged ne se déclenche donc ne peut mettre jusqu'à la OnSelect étant définie pour le contrôle txtStartDate.

Apprécions grandement toute aide sur celui-ci. À votre santé!

Answer 1

Après une courte vérification de la Datepicker jQuery UI Sources de la solution est de simplement déclencher l'événement de changement vous-même

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

La raison de ce sont les lignes suivantes dans la source Datepicker jQuery UI

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

Comme vous pouvez le voir, l'événement change déclenche l'événement change par défaut si l'occurrence datepicker est un champ input mais ne le déclenche pas si vous avez spécifié un gestionnaire personnalisé onSelect (comme vous l'avez fait).

Vous pourriez argumenter que c'est le bon comportement car il vous garantit une configurabilité maximale. Vous pouvez décider si vous voulez que l'événement change se produise ou non de cette façon.

Mais je suis d'accord que ce comportement devrait peut-être être documenté.

Answer 2

Vous pouvez simplement ajouter

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

à la fin de onSelect fonction. Prenons l'exemple suivant travail: http://jsbin.com/oqunu/ ou modifier la version http://jsbin.com/oqunu/edit

Ou déplacer ou la logique des fonctions déclenchées par TextChanged et se débarrasser de onSelect. Comme ici: http://jsbin.com/iyajo; modifier la version http://jsbin.com/iyajo/edit

Answer 3

Dans la même veine, j'ai trouvé que si vous attachez le DatePicker à un champ de saisie de texte, et spécifiez .selectMultiple, alors un comportement étrange se produit. Plus précisément, lorsque vous cliquez sur une cellule déjà sélectionnée (pour la désélectionner), elle scintille mais reste sélectionnée. Cela se produit car d'abord la cellule n'est pas sélectionnée, mais DatePicker lève un événement 'change'. L'événement change allume la cellule actuelle car le calendrier est attaché à une entrée de texte! D'une certaine manière, cela a du sens: vous ne devriez probablement pas coller plusieurs sélections dans une seule zone de texte. Mais le comportement est non documenté et plutôt difficile à tracer, sauf si vous savez déjà comment DatePicker comprend les zones de texte.