bootstrap-datepickerで選択した日付に変更を検出します

Question

添付ファイルにdatepickerを付けた入力要素が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> 

は、Iは、入力要素のonChangeイベントで値を得ることができます。しかし、ユーザーがdatepickerから日付を変更すると（つまり、カレンダーの日付をクリックすると）、onChangeハンドラは呼び出されません。

入力要素に入力するのではなく、datepickerで行われた選択した日付の変更を検出するにはどうすればよいですか？

Answer 1

他のすべての答えはjQuery UI datepickerに関連しているが、質問さは約bootstrap-datepickerです。

あなたは、関連する入力に変更イベントをトリガした後、 onChangeハンドラから日付を変更する両方の方法を処理するために changeDateイベントに使用することができます

：

CHANGEDATE

は、いつ日付解雇します変更されます。

例：ここでは

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

が作業フィドルです：http://jsfiddle.net/IrvinDominin/frjhgpn8/

Answer 2

あなたは、日付ピッカーが選択されたときに、呼び出されるonSelectイベント

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

を使用することができます。この関数は、選択した日付をテキストとして 、datepickerインスタンスをパラメータとして受け取ります。この は、関連する入力フィールドを参照します。

SEE HERE

Answer 3

はこのお試しください：ここで

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

Answer 4

をそのために私のコードです：

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

あなたが好むコメントを外すだけです。 最初のオプションは、他の入力要素の値を変更します。 2つ目は、datepickerのデフォルト形式で日付に警告します。 3つめは独自のカスタム形式で日付を警告します。 最後のオプションはログに出力します（デフォルトのフォーマット日付）。

e.date、e.dates（複数の日付入力用）またはe.format（...）を使用するのはあなたの選択です。ここ

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>