78

bootstrap-datepickerを使用して作成された 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>

ユーザーが入力要素に直接入力して日付を変更すると、上記のように、入力要素の onChange イベントで値を取得できます。しかし、ユーザーが datepicker から日付を変更した場合 (つまり、カレンダーの日付をクリックした場合)、onChange ハンドラーは呼び出されません。

入力要素に入力するのではなく、日付ピッカーを介して行われた選択された日付への変更を検出するにはどうすればよいですか?

4

8 に答える 8

38

これを試して： 

$("#dp3").on("dp.change", function(e) {
    alert('hey');
});
于 2015-06-18T07:32:28.617 に答える
14 

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

于 2016-05-06T21:15:41.417 に答える
-17

onSelectイベントで使える

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

日付ピッカーが選択されたときに呼び出されます。この関数は、選択された日付をテキストとして受け取り、datepicker インスタンスをパラメーターとして受け取ります。これは関連する入力フィールドを参照します。

ここを見る

于 2013-06-09T12:01:14.403 に答える