Problem mit dem Ereignis jQuery Datepicker onchange

238

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?

Zbestzeus
quelle
Am Ende habe ich stackoverflow.com/a/30132949/293792 verwendet, da dies die Frage direkt zu beantworten
schien

Antworten:

369

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 :

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 :

TJ Crowder
quelle
1
@ user760092: Ich habe diese Antwort gepostet und bin dann ausgegangen. Als ich ging, dachte ich buchstäblich: "Weißt du, du könntest die changeHandler auslösen ", und deshalb habe ich die Antwort damit aktualisiert. :-)
TJ Crowder
1
Ich bin im Kreis herumgegangen und habe versucht, dies in allen Szenarien zum Laufen zu bringen, und das hat es geschafft! Sehr geschätzt!
Chris Nevill
7
Warum in aller Welt haben sie diese tatsächlichen Ereignisse nicht gemacht?
Jay K
1
Dies ist für "Auswählen" und NICHT für "Ändern". Wenn Sie ein Datum auswählen und dann erneut auswählen, wird dieses Ereignis ausgelöst. Einige Entwickler möchten wissen, wann sich ein Datum von einem Anfangszustand geändert hat, um festzustellen, ob die Daten "schmutzig" sind und gespeichert werden müssen. Aus diesem Grund stimme ich Sie dafür ab.
AndroidDev
4
@ AndroidDev: Ich habe das klargestellt. ( Sie könnten natürlich haben; das Ziel der Website ist es, gute Antworten zu haben ; eine respektvolle Bearbeitung, um dies zu erreichen, wird empfohlen.) Es ist ein Designfehler im Datepicker, nicht in der Antwort. (Was es tun sollte , ist ein Änderungsereignis auf die Eingabe auszulösen, wenn und nur wenn das Datum geändert wird, aber es nicht.)
TJ Crowder
67

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!
});
theChrisKent
quelle
Hat jemand dies kürzlich getestet? Es funktioniert nicht bei mir. i.lastVal gibt undefiniert zurück und scheint keine der verfügbaren Eigenschaften zu sein.
BK
Ich habe dies einfach ohne Probleme implementiert. Klappt wunderbar.
DevSlick
das funktioniert nicht mehr, lastval ist nicht mehr definiert
luke_mclachlan
4
@luke_mclachlan ist lastValjedoch ;-)
Alexander Derck
lastValexistiert zumindest in meinen Tests nicht für das Datepicker-Objekt. Diese Lösung löst also immer die Änderung aus.
Nicholas
13

Sie suchen nach dem Ereignis onSelect im Datepicker-Objekt:

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

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
});
CodeDreamer68
quelle
Ich verwende dies mit Knockout. Ich konnte es nicht dazu bringen, ein Ereignis auszulösen, wenn der Benutzer das Datum löschte oder manuell änderte, ohne ein Datum in der Auswahl auszuwählen. Sehr hilfreich.
Tony
Mein Problem mit jQuery-Datumsauswahlfeldern ist nicht genau das gleiche wie das hier veröffentlichte. Es geht darum, dass das Änderungsereignis mehrmals ausgelöst wird. Ich habe mehrere Lösungen ausprobiert und dies ist die einzige, die in meiner Situation tatsächlich funktioniert.
Patee Gutee
Ich habe mehr oder weniger das Gleiche getan wie diese Lösung und ich denke, sie funktioniert definitiv am besten. Ich werde das, was ich getan habe, in einer separaten Antwort veröffentlichen ...
10
$('#inputfield').change(function() { 
    dosomething();
});
user583576
quelle
14
Ich dachte das sollte funktionieren, aber leider nicht. Es wird nur ausgelöst, wenn das Feld über die Tastatur geändert wird , nicht, wenn Sie aus der Datumsauswahl auswählen. Nervig.
Simon East
1
Aus den jQuery-UI-Dokumenten: "Dieses Widget bearbeitet den Wert seines Elements programmgesteuert. Daher wird möglicherweise kein natives Änderungsereignis ausgelöst, wenn sich der Wert des Elements ändert."
Sam Kauffman
Das Lustige ist, dass ich das Gegenteil davon bekomme - wenn ich die Eingabe von Hand über die Tastatur ändere, wird kein Ereignis ausgelöst. Wenn ich jedoch den Wert des Felds über das Widget ändere, wird das Änderungsereignis ausgelöst. Seltsam.
Renan
Dies funktioniert gut, wenn ich mit der Tastatur und mit dem Datumsauswahl-Widget ändere.
Der Sammie
irgendwie ruft das mehrmals auf.
NMathur
9

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.

NMathur
quelle
4

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 :)

suchen
quelle
4

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);
         }
     }
});
tstrand66
quelle
Fehler "'$' ist undefiniert" für dieses Snippet. Oh oh.
Michael12345
Sie senden ein Änderungsereignis im onSelect-Ereignis aus, was nicht ganz der gewünschte Effekt ist, da select jedes Mal ausgelöst wird, wenn auf ein Datum geklickt wird. Dies bedeutet jedoch nicht unbedingt, dass das Datum tatsächlich geändert wurde, dh der Benutzer hat möglicherweise auf dasselbe Datum geklickt zweimal.
Jacques
@ Jacques du bist richtig. Ich glaube, Sie könnten String dateText mit this.value vergleichen und dies nur auslösen, wenn sie unterschiedlich sind.
Tstrand66
@ Michael12345 Ich verstehe was du meinst. Ich habe es so modifiziert, dass es kein Ausschnitt mehr ist. Entschuldigen Sie.
Tstrand66
3

Versuche dies

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

Hoffe das hilft:)

Mike Tracker
quelle
3

Versuchen :

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

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.

Sam
quelle
1

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
});
Andriy Petrusha
quelle
1

Meine Lösung ist:

events: {
    'apply.daterangepicker #selector': 'function'
}
Daniel Ortegón
quelle
0

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);        
            });
Hemang Rami
quelle
0

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

Mavirroco
quelle
0

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