Problème d'événement jQuery Datepicker onchange

J'ai un code JS dans lequel lorsque vous modifiez un champ, il appelle une routine de recherche. Le problème est que je ne trouve aucun événement jQuery qui se déclenche lorsque le Datepicker met à jour le champ de saisie.

Pour une raison quelconque, un événement de modification n'est pas appelé lorsque Datepicker met à jour le champ. Lorsque le calendrier apparaît, il change le focus, donc je ne peux pas l'utiliser non plus. Des idées?

Vous pouvez utiliser le datepicker onSelectévénement .

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

Exemple en direct :

$(".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="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Malheureusement, il se onSelectdé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 dans le sélecteur de date: il se déclenche toujours onSelect(même si rien n'a changé) et ne déclenche aucun événement sur l'entrée sous-jacente au changement. (Si vous regardez dans 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 (éventuellement l' changeévénement habituel , ou éventuellement un sélecteur de date) spécifique).

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

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

Cela se déclenchera changesur le sous-jacent inputpour tout gestionnaire connecté via jQuery. Mais encore une fois, il le déclenche toujours . Si vous ne souhaitez tirer que sur un changement réel, vous devrez enregistrer la valeur précédente (éventuellement via data) et comparer.

Exemple en direct :

$(".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="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

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

Cependant, il existe une belle propriété sur l'objet datepicker ( lastVal) qui vous permettra de déclencher conditionnellement l'événement de modification uniquement sur les modifications réelles sans avoir à stocker vous-même la ou les valeurs:

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

Ensuite, gérez simplement les événements de changement comme d'habitude:

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

Votre recherche de l' événement onSelect dans l'objet datepicker:

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

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

C'est une solution simple. Chaque fois que la boîte de dialogue se ferme, nous testons pour voir 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 connecter des gestionnaires pour cet événement personnalisé ...

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

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

J'utilise bootstrap-datepicker et aucune des solutions ci-dessus n'a fonctionné pour moi. Cette réponse m'a aidé ..

bootstrap datepicker change date event ne se déclenche pas lors de la modification manuelle des dates ou de la suppression de la date

Voici ce que j'ai appliqué:

 $('.date-picker').datepicker({
     endDate: new Date(),
     autoclose: true,
 }).on('changeDate', function(ev){
        //my work here
    });

J'espère que cela peut aider les autres.

Sur jQueryUi 1.9, j'ai réussi à le faire fonctionner grâce à une valeur de données supplémentaire et une combinaison de fonctions beforeShow et onSelect:

$( ".datepicker" ).datepicker({
    beforeShow: function( el ){
        // set the current value before showing the widget
        $(this).data('previous', $(el).val() );
    },

    onSelect: function( newText ){
        // compare the new value to the previous one
        if( $(this).data('previous') != newText ){
            // do whatever has to be done, e.g. log it to console
            console.log( 'changed to: ' + newText );
        }
    }
});

Travaille pour moi :)

Je sais que c'est une vieille question. Mais je n'ai pas pu obtenir l'événement jquery $ (this) .change () pour qu'il se déclenche correctement surSelect. J'ai donc opté pour l'approche suivante pour déclencher l'événement de changement via vanilla js.

$('.date').datepicker({
     showOn: 'focus',
     dateFormat: 'mm-dd-yy',
     changeMonth: true,
     changeYear: true,
     onSelect: function() {
         var event;
         if(typeof window.Event == "function"){
             event = new Event('change');
             this.dispatchEvent(event);
         }   else {
             event = document.createEvent('HTMLEvents');
             event.initEvent('change', false, false);
             this.dispatchEvent(event);
         }
     }
});

Essaye ça

$('#dateInput').datepicker({
 onSelect: function(){
       $(this).trigger('change');
      }
 }});

J'espère que cela t'aides:)

Essayez:

$('#idPicker').on('changeDate', function() {
    var date = $('#idPicker').datepicker('getFormattedDate');
});

Le manuel dit:

apply.daterangepicker: Triggered when the apply button is clicked, or when a predefined range is clicked

Alors:

$('#daterange').daterangepicker({
  locale: { cancelLabel: 'Clear' }  
});

$('#daterange').on('apply.daterangepicker', function() {
  alert('worked!');
});

Travaille pour moi.

Mon soluthion:

var $dateInput = $('#dateInput');

$dateInput.datepicker({
    onSelect: function(f,d,i){
        if(d !== i.lastVal){
            $dateInput.trigger("change");
        }
    }
}).data('datepicker');

$dateInput.on("change", function () {
   //your code
});

Ma solution est:

events: {
    'apply.daterangepicker #selector': 'function'
}

Code d'événement de changement de valeur sélectionné par DatePicker ci-dessous

/* HTML Part */
<p>Date: <input type="text" id="datepicker"></p>

/* jQuery Part */
$("#datepicker").change(function() {
                selectedDate= $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' }).val();
                alert(selectedDate);        
            });

si vous utilisez wdcalendar, cela va vous aider

 $("#PatientBirthday").datepicker({ 
        picker: "<button class='calpick'></button>",
        onReturn:function(d){
          var today = new Date();
          var birthDate = d;
          var age = today.getFullYear() - birthDate.getFullYear();
          var m = today.getMonth() - birthDate.getMonth();
          if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
            age--;
          }

          $('#ageshow')[0].innerHTML="Age: "+age;
          $("#PatientBirthday").val((d.getMonth() + 1) + '/' + d.getDate() + '/' +  d.getFullYear());
        }
      }); 

l'événement onReturn fonctionne pour moi

j'espère que cette aide

Je pense que votre problème peut résider dans la configuration de votre datepicker. Pourquoi ne déconnectez-vous pas l'entrée ... n'utilisez pas altField. Au lieu de cela, définissez explicitement les valeurs lorsque onSelect se déclenche. Cela vous donnera le contrôle de chaque interaction; le champ de texte utilisateur et le sélecteur de date.

Remarque: Parfois, vous devez appeler la routine sur .change () et non sur .onSelect () car onSelect peut être appelé sur différentes interactions auxquelles vous ne vous attendez pas.

Pseudo code:

$('#date').datepicker({
    //altField: , //do not use
    onSelect: function(date){
        $('#date').val(date); //Set my textbox value
        //Do your search routine
    },
}).change(function(){
    //Or do it here...
});

$('#date').change(function(){
    var thisDate = $(this).val();
    if(isValidDate(thisDate)){
        $('#date').datepicker('setDate', thisDate); //Set my datepicker value
        //Do your search routine
    });
});