web-dev-qa-db-de.com

Jquery Datepicker-Änderungsereignisauslöser und Standardänderungsereignis der Eingabe

Ich habe Datepicker

  <input type='text' class='inp'>  
<script>
   $('.inp').datepicker();

  $(".inp").on("change",function (){ 
   console.log('inp changed');
  });
</script>

Wenn ich '.inp' zum ersten Mal ändere, gebe ich einen Wert ein, dann klicke ich sofort auf den geöffneten Kalender von datepicker. Ich bekomme zwei 'Change'-Event-Hörer. Zuerst von Hand ändern, dann von Datepicker ändern ... Wie kann ich das vermeiden?

javascriptjquerydatepickerjquery-ui-datepicker
12
Konstantin Vahrushev

Stellen Sie Ihre Eingabe readOnly ein, damit Sie den Feldwert nur über das Symbol ändern können.

<input type='text' class='inp' readOnly />

verwenden Sie dann onSelect, um das ausgewählte Datum wie folgt abzurufen:

$(function() {
    $(".inp").datepicker({
        onSelect: function(dateText, inst) {
            // alert(dateText);
        }
    });
});
12
Parkash Kumar

Verwenden Sie die onSelect-Funktion wie folgt:

$(function() {
    $( ".datepicker" ).datepicker({
        onSelect: function() {
        //your code here
    }});

Dies wird ausgelöst, wenn ein Datum aus dem Kalender ausgewählt wird und nicht, wenn es eingegeben wird.

6
brso05

Sie können onSelect das Änderungsereignis im Textfeld auslösen lassen. Auf diese Weise verhält sich das Bearbeiten des Datums über das Textfeld oder über die Datumsauswahl gleich.

$('.inp').datepicker({
  onSelect: function() {
    return $(this).trigger('change');
  }
);

$(".inp").on("change",function (){ 
   console.log('inp changed');
}
2
Shawn Balestracci

Wenn Sie den Bootstrap-Datepicker verwenden, können Sie Folgendes tun:

$('.datepicker').datepicker()
    .on('changeDate', function(e){
        # `e` here contains the extra attributes
});

Für weitere Details: Bootstrap Datepicker-Ereignisse

0
Mivaweb

Vielen Dank an alle, das ist was ich benutzt habe,

function myfunction(x,x2){
    var date1 = new Date(x);
    var MyDateString; 
    MyDateString = date1.getFullYear()+ '/' + ('0' + (date1.getMonth()+1)).slice(-2) + '/' + ('0' + date1.getDate()).slice(-2);
    x2.value=  MyDateString;    
 }

x ist der Datepicker-Wert und x2 das Datepicker-Objekt

0
athene

Versuche dies

  $(function() {
        $("#birth_date").datepicker({
        onSelect: function() {
            console.log("You Code Here");
        }});
    });
0
Rahul Koshti

Vielen Dank! Alle, aber ich konnte nicht Feldleser machen, das ist Voraussetzung. Also musste ich mich selbst erforschen. Also poste ich meine endgültige Lösung. Ich habe mich für 150 ms aufgelöst und dann wieder gebunden . ich habe dafür ein Jquery-Plugin erstellt

function myfunc(that){
        $(that).one('change', function(){
                var that = this;
                setTimeout(function(){myfunc(that);}, 150);
                //some logic
            }
        )
}

myfunc(".inp");
0
Konstantin Vahrushev