Ermitteln der Änderung des ausgewählten Datums mit bootstrap-datepicker

Question

Ich habe ein Eingabeelement mit einem angehängten Datepicker, der mit bootstrap-datepicker erstellt wurde.

<div class="well"> 
    <div class="input-append date" id="dp3" data-date="2012-01-02" data-date-format="yyyy-mm-dd"> 
     <input type="text" id="date-daily"> 
     <span class="add-on"><i class="icon-th"></i></span>  
    </div> 
</div> 

<script language="JavaScript" type="text/javascript"> 
    $(document).ready(function() { 
     $('#dp3').datepicker(); 
     $('#date-daily').val('0000-00-00'); 
     $('#date-daily').change(function() { 
      console.log($('#date-daily').val()); 
     }); 
    }); 
</script> 

Wenn der Benutzer das Datum ändert, indem direkt in das Eingabeelement eingeben, so kann ich den Wert mit dem onChange Ereignisse des Eingangselementes erhalten, wie oben gezeigt. Wenn der Benutzer jedoch das Datum von Datepicker ändert (d. H. Indem er auf ein Datum im Kalender klickt), wird der onChange-Handler nicht aufgerufen.

Wie kann ich Änderungen am ausgewählten Datum erkennen, die über den Datumsauswahlpunkt vorgenommen werden, anstatt in das Eingabeelement einzugeben?

Answer 1

Alle anderen Antworten auf jQuery UI datepicker verwandt sind, aber die Frage ist etwa bootstrap-datepicker.

können Sie die Verwendung auf changeDate Ereignis ein Änderungsereignis auf dem zugehörigen Eingang auszulösen, und behandeln dann beide Möglichkeiten, das Datum aus dem onChange Handler zu ändern:

CHANGE

ausgelöst, wenn das Datum ist geändert.

Beispiel:

$('#dp3').datepicker().on('changeDate', function (ev) { 
    $('#date-daily').change(); 
}); 
$('#date-daily').val('0000-00-00'); 
$('#date-daily').change(function() { 
    console.log($('#date-daily').val()); 
}); 

Hier ist eine Arbeits Geige: http://jsfiddle.net/IrvinDominin/frjhgpn8/

Answer 2

können Sie verwenden onSelect Ereignis

$("#date-daily").datepicker({ 
    onSelect: function(dateText) { 
    alert($('#dp3').val()); 
    } 
}); 

Es wird aufgerufen, wenn der Datumsauswahl ausgewählt wird. Die Funktion empfängt das ausgewählte Datum als Text und die Datepicker-Instanz als Parameter. Diese bezieht sich auf das zugehörige Eingabefeld.

SEE HERE

Answer 3

Try this:

$("#dp3").on("dp.change", function(e) { 
    alert('hey'); 
}); 

Answer 4

Hier ist mein Code für das heißt:

$('#date-daily').datepicker().on('changeDate', function(e) { 
    //$('#other-input').val(e.format(0,"dd/mm/yyyy")); 
    //alert(e.date); 
    //alert(e.format(0,"dd/mm/yyyy")); 
    //console.log(e.date); 
}); 

Entfernen Sie einfach das, das Sie bevorzugen. Die erste Option ändert den Wert eines anderen Eingabeelements. Die zweite Person alarmiert das Datum mit dem Datumsformat datepicker. Der dritte meldet das Datum mit Ihrem eigenen benutzerdefinierten Format. Die letzte Option wird ausgegeben, um zu protokollieren (Standardformat Datum).

Sie haben die Wahl zwischen E-Date, E-Date (für mehrere Datumsangaben) oder E-Format (...).

hier some more info

Answer 5

$(function() { 
 
    $('input[name="datetimepicker"]').datetimepicker({ 
 
    defaultDate: new Date() 
 
    }).on('dp.change',function(event){ 
 
    $('#newDateSpan').html("New Date: " + event.date.format('lll')); 
 
    $('#oldDateSpan').html("Old Date: " + event.oldDate.format('lll')); 
 
    }); 
 
    
 
});

<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://momentjs.com/downloads/moment.min.js"></script> 
 
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> 
 
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script> 
 

 
<div class="container"> 
 
    <div class="col-xs-12"> 
 
    <input name="datetimepicker" /> 
 
    <p><span id="newDateSpan"></span><br><span id="oldDateSpan"></span></p> 
 
    </div> 
 
</div>