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 datpicker 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 de focus et je ne peux pas non plus l’utiliser. Des idées?

Vous pouvez utiliser l’événement onSelect du onSelect .

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

Exemple en direct :

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

").html(msg).appendTo(document.body); } });

     

La réponse de TJ Crowder ( https://stackoverflow.com/a/6471992/481154 ) est très bonne et rest toujours exacte. Déclencher l’événement de changement dans la fonction onSelect est aussi proche que vous allez l’obtenir.

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

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

Ensuite, manipulez simplement les événements de changement comme d’habitude:

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

Vous recherchez l’événement onSelect dans l’object datepicker:

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

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 dialog 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).sortinggger('dateupdated'); } } }); 

Maintenant, nous pouvons connecter des gestionnaires pour cet événement personnalisé …

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

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 date d’effacement

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 via une valeur de données supplémentaire et une combinaison des 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, eg log it to console console.log( 'changed to: ' + newText ); } } }); 

Travaille pour moi 🙂

Essaye ça

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

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

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

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.

Ma solution est la suivante:

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

DatePicker a sélectionné le code d’événement de changement de valeur ci-dessous

 /* HTML Part */ 

Date:

/* 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: "", 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

Essayez:

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