jQuery UI Datepicker onchange - Problème de fonctionnement

Question

J'ai un code JS dans lequel la modification d'un champ appelle une routine de recherche. Le problème est que je n'arrive pas à trouver d'événements jQuery qui se déclenchent lorsque le Datepicker met à jour le champ de saisie.

Pour une raison quelconque, un événement de changement n'est pas appelé lorsque Datepicker met à jour le champ. Lorsque le calendrier s'affiche, il change le focus et je ne peux donc pas l'utiliser non plus. Une idée ?

Answer 1

Vous pouvez utiliser la fonction onSelect événement .

$(".date").datepicker({
    onSelect: function(dateText) {
        console.log("Selected date: " + dateText + "; input's current value: " + this.value);
    }
});

Exemple concret :

$(".date")
.datepicker({
    onSelect: function(dateText) {
        console.log("Selected date: " + dateText + "; input's current value: " + this.value);
    }
})
.on("change", function() {
    console.log("Got change event from field");
});

<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Malheureusement, onSelect se déclenche chaque fois qu'une date est sélectionnée, même si elle n'a pas changé. Il s'agit d'un défaut de conception du sélecteur de date : il se déclenche toujours onSelect (même si rien n'a changé), et ne déclenche un événement sur l'entrée sous-jacente en cas de changement. (Si vous regardez le code de cet exemple, nous écoutons les changements, mais ils ne sont pas déclenchés). Il devrait probablement déclencher un événement sur l'entrée lorsque les choses changent (peut-être l'événement habituel change ou éventuellement un événement spécifique au datepicker).

---

Si vous le souhaitez, vous pouvez bien sûr faire le change sur l'événement input le feu :

$(".date").datepicker({
    onSelect: function() {
        $(this).change();
    }
});

Cela déclenchera change sur le sous-jacent input pour tout gestionnaire connecté via jQuery. Mais encore une fois, il toujours l'enflamme. Si vous souhaitez ne déclencher l'action qu'en cas de changement réel, vous devrez sauvegarder la valeur précédente (éventuellement par l'intermédiaire de la fonction data ) et de les comparer.

Exemple concret :

$(".date")
.datepicker({
    onSelect: function(dateText) {
        console.log("Selected date: " + dateText + "; input's current value: " + this.value);
        $(this).change();
    }
})
.on("change", function() {
    console.log("Got change event from field");
});

<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Answer 2

La réponse de T.J. Crowder ( https://stackoverflow.com/a/6471992/481154 ) est très bonne et reste précise. Déclencher l'événement de changement dans la fonction onSelect est aussi proche que possible.

Cependant, il existe une propriété intéressante sur l'objet datepicker ( lastVal ) qui vous permettra de déclencher conditionnellement l'événement de changement uniquement en cas de changements réels sans avoir à stocker la (les) valeur(s) vous-même :

$('#dateInput').datepicker({
     onSelect: function(d,i){
          if(d !== i.lastVal){
              $(this).change();
          }
     }
});

Il suffit ensuite de gérer les événements de changement comme d'habitude :

$('#dateInput').change(function(){
     //Change code!
});

Answer 3

Vous recherchez le onSelect dans l'objet datepicker :

$('.selector').datepicker({
   onSelect: function(dateText, inst) { ... }
});

Answer 4

$('#inputfield').change(function() { 
    dosomething();
});

Answer 5

J'ai écrit ceci parce que j'avais besoin d'une solution pour déclencher un événement seulement si la date changeait.

C'est une solution simple. Chaque fois que la boîte de dialogue se ferme, nous vérifions si les données ont changé. Si c'est le cas, nous déclenchons un événement personnalisé et réinitialisons la valeur stockée.

$('.datetime').datepicker({
    onClose: function(dateText,datePickerInstance) {
        var oldValue = $(this).data('oldValue') || "";
        if (dateText !== oldValue) {
            $(this).data('oldValue',dateText);
            $(this).trigger('dateupdated');
        }
    }
});

Nous pouvons maintenant mettre en place des gestionnaires pour cet événement personnalisé...

$('body').on('dateupdated','.datetime', function(e) {
    // do something
});