web-dev-qa-db-ja.com

bootstrap-datepickerを使用して選択した日付への変更を検出する

bootstrap-datepicker を使用して作成されたdatepickerが添付されたinput要素があります。

<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ハンドラーは呼び出されません。

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

jquerytwitter-bootstrapdatepickerbootstrap-datepicker
63
user2269756

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

On changeDate イベントを使用して、関連する入力で変更イベントをトリガーし、onChangeハンドラーから日付を変更する両方の方法を処理できます。

変更日

日付が変更されたときに発生します。

例：

$('#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/

114
Irvin Dominin

これを試して：

$("#dp3").on("dp.change", function(e) {
    alert('hey');
});
32
Petr
$(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>
12
crashtestxxx

以下がそのための私のコードです。

$('#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（...）を使用することはあなたの選択です。

ここ 詳細

9
Lucio Chávez
$(document).ready(function(){

$("#dateFrom").datepicker({
    todayBtn:  1,
    autoclose: true,
}).on('changeDate', function (selected) {
    var minDate = new Date(selected.date.valueOf());
    $('#dateTo').datepicker('setStartDate', minDate);
});

$("#dateTo").datepicker({
    todayBtn:  1,
    autoclose: true,}) ;

});
1
Sandeep Yadav