Problem mit dem Ereignis jQuery Datepicker onchange

Ich habe einen JS-Code, in dem beim Ändern eines Felds eine Suchroutine aufgerufen wird. Das Problem ist, dass ich keine jQuery-Ereignisse finden kann, die ausgelöst werden, wenn der Datepicker das Eingabefeld aktualisiert.

Aus irgendeinem Grund wird ein Änderungsereignis nicht aufgerufen, wenn Datepicker das Feld aktualisiert. Wenn der Kalender erscheint, ändert sich der Fokus, sodass ich ihn auch nicht verwenden kann. Irgendwelche Ideen?

Sie können das onSelectEreignis des Datepickers verwenden .

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

Live-Beispiel :

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

onSelectWird leider ausgelöst, wenn ein Datum ausgewählt wird, auch wenn es sich nicht geändert hat. Dies ist ein Konstruktionsfehler im Datepicker: Er wird immer ausgelöst onSelect(auch wenn sich nichts geändert hat) und löst bei Änderungen kein Ereignis für die zugrunde liegende Eingabe aus. (Wenn Sie sich den Code dieses Beispiels ansehen change, warten wir auf Änderungen, aber sie werden nicht ausgelöst.) Es sollte wahrscheinlich ein Ereignis auf der Eingabe auslösen, wenn sich die Dinge ändern (möglicherweise das übliche Ereignis oder möglicherweise ein Datumspicker-). spezifisch).

Wenn Sie möchten, können Sie das changeEreignis natürlich in inputBrand setzen:

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

Das wird changeauf den Basiswert feuerninput für jeden Handler, der über jQuery angeschlossen ist, ausgelöst. Aber es wird immer wieder ausgelöst. Wenn Sie nur eine echte Änderung auslösen möchten, müssen Sie den vorherigen Wert (möglicherweise über data) speichern und vergleichen.

Live-Beispiel :

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

Die Antwort von TJ Crowder ( https://stackoverflow.com/a/6471992/481154 ) ist sehr gut und bleibt weiterhin korrekt. Das Auslösen des Änderungsereignisses innerhalb der onSelect-Funktion ist so nah wie möglich.

Es gibt jedoch eine nette Eigenschaft für das Datepicker-Objekt ( lastVal), mit der Sie das Änderungsereignis nur bei tatsächlichen Änderungen bedingt auslösen können, ohne die Werte selbst speichern zu müssen:

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

Behandeln Sie dann Änderungsereignisse wie gewohnt:

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

Sie suchen nach dem Ereignis onSelect im Datepicker-Objekt:

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

Ich habe dies geschrieben, weil ich eine Lösung brauchte, um ein Ereignis nur dann auszulösen, wenn sich das Datum änderte.

Es ist eine einfache Lösung. Jedes Mal, wenn das Dialogfeld geschlossen wird, testen wir, ob sich die Daten geändert haben. Wenn dies der Fall ist, lösen wir ein benutzerdefiniertes Ereignis aus und setzen den gespeicherten Wert zurück.

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

Jetzt können wir Handler für dieses benutzerdefinierte Ereignis anschließen ...

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

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

Ich verwende Bootstrap-Datepicker und keine der oben genannten Lösungen hat bei mir funktioniert. Diese Antwort hat mir geholfen ..

Das Ereignis zum Ändern des Datums des Bootstrap-Datumsauswahlprogramms wird nicht ausgelöst, wenn Datumsangaben manuell bearbeitet oder das Datum gelöscht werden

Folgendes habe ich angewendet:

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

Hoffe das kann anderen helfen.

Unter jQueryUi 1.9 habe ich es geschafft, einen zusätzlichen Datenwert und eine Kombination aus beforeShow- und onSelect-Funktionen zum Laufen zu bringen:

$( ".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 );
        }
    }
});

Funktioniert bei mir :)

Ich weiß, das ist eine alte Frage. Aber ich konnte das Ereignis jquery $ (this) .change () nicht dazu bringen, onSelect korrekt auszulösen. Also habe ich den folgenden Ansatz gewählt, um das Änderungsereignis über Vanilla Js auszulösen.

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

Versuche dies

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

Hoffe das hilft:)

Versuchen :

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

Handbuch sagt:

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

So:

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

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

Funktioniert bei mir.

Meine Lösung:

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

Meine Lösung ist:

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

Der von DatePicker ausgewählte Wert ändert den Ereigniscode unten

/* 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);        
            });

Wenn Sie wdcalendar verwenden, wird dies Ihnen helfen

 $("#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());
        }
      }); 

Die Veranstaltung onReturn funktioniert für mich

Ich hoffe das hilft

Ich denke, Ihr Problem könnte darin liegen, wie Ihr Datepicker eingerichtet ist. Warum trennen Sie nicht den Eingang ... verwenden Sie nicht altField. Legen Sie stattdessen die Werte explizit fest, wenn onSelect ausgelöst wird. Auf diese Weise können Sie jede Interaktion steuern. das Benutzertextfeld und die Datumsauswahl.

Hinweis: Manchmal müssen Sie die Routine für .change () und nicht für .onSelect () aufrufen, da onSelect für verschiedene Interaktionen aufgerufen werden kann, die Sie nicht erwarten.

Pseudocode:

$('#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
    });
});