Wykryj zmianę na wybraną datę przy pomocy bootstrap-datepicker

Question

Mam element wejściowy z dołączonym datepicker utworzonym przy użyciu bootstrap-datepicker.

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

Gdy użytkownik zmienia termin wpisując bezpośrednio do elementu wejściowego, można uzyskać wartość z imprezy elementu wejściowego onChange, jak pokazano powyżej. Ale gdy użytkownik zmieni datę z datepicker (tj. Klikając datę w kalendarzu), procedura obsługi onChange nie jest wywoływana.

Jak mogę wykryć zmiany w wybranej dacie, które są wprowadzane za pośrednictwem datepika, zamiast wpisywać w elemencie wejściowym?

Answer 1

Wszystkie inne odpowiedzi są związane z jQuery UI datepicker, ale pytanie jest o bootstrap-datepicker.

można użyć na changeDate imprezy do wyzwalania zdarzenia zmiany na wejściu powiązanym, a następnie obsługiwać oba sposoby zmiany daty z onChange Handler:

CHANGEDATE

strzały gdy data jest zmieniony.

Przykład:

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

Oto skrzypce robocze: http://jsfiddle.net/IrvinDominin/frjhgpn8/

Answer 2

Można użyć onSelect wydarzenie

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

to nazywa się po wybraniu datepicker. Funkcja odbiera wybraną datę jako tekst i instancję datepika jako parametry. to odnosi się do powiązanego pola wejściowego.

SEE HERE

Answer 3

Spróbuj tego:

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

Answer 4

Tu jest mój kod, który:

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

Wystarczy odkomentować ten, który preferujesz. Pierwsza opcja zmienia wartość innego elementu wejściowego. Drugi ostrzega o dacie z domyślnym formatem datepika. Trzeci ostrzega o dacie z własnym niestandardowym formatem. Ostatnia opcja służy do rejestrowania (domyślna data formatowania).

Wybór padł na e.date, e.dates (w celu wprowadzenia daty wprowadzenia) lub e.format (...).

tutaj 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>