web-dev-qa-db-fra.com

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 susceptible de se déclencher lorsque Datepicker met à jour le champ de saisie.

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

jquerydatepicker
218
zbestzeus

Vous pouvez utiliser l'événement onSelect du sélecteur de date .

$(".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, onSelect se déclenche chaque fois qu'une date est sélectionnée, même si elle n'a pas changé. Ceci est un défaut de conception dans le sélecteur de date: il déclenche toujours onSelect (même si rien n'a changé), et ne ne déclenche aucun événement sur l'entrée sous-jacente lors de la modification. (Si vous regardez dans le code de cet exemple, nous écoutons les modifications, mais elles ne sont pas levées.) 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 programme spécifique au datepicker).

Bien sûr, si vous le souhaitez, vous pouvez créer l'événement change sur le input 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 le déclenche. Si vous voulez déclencher uniquement sur un changement réel, vous devez 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>
348
T.J. Crowder

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

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

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

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

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

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

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

J'ai écrit ceci parce que j'avais besoin d'une solution pour déclencher un événement uniquement si la date était modifiée.

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
});
11
CodeDreamer68
$('#inputfield').change(function() { 
    dosomething();
});
9
user583576

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

l'événement d'amorçage de date de changement de datepicker ne se déclenche pas lors de l'édition manuelle des dates ou de l'effacement 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.

9
NMathur

Je sais que c'est une vieille question. Mais je n'ai pas pu faire en sorte que l'événement jQuery $ (this) .change () se déclenche correctement lors de la sélection. Je suis donc allé avec 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);
         }
     }
});
4
tstrand66

Sur jQueryUi 1.9, j'ai réussi à le faire fonctionner avec 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 :)

4
seeeking

Essayez:

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

Essaye ça

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

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

2
mike tracker

Ma solution est:

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

1
Daniel Ortegón

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.

1
Sam

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 surRetour fonctionne pour moi

espérons que cette aide

0
mavirroco

Ma 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
});
0
Andriy Petrusha

DatePicker a sélectionné le code d'événement de changement de valeur 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);        
            });
0
Hemang Rami