web-dev-qa-db-ja.com

Bootstrap DatePicker-Onchange

Bootstrap 3 Datepicker プラグインを使用しています。ユーザーが日付を選択したら、UIのさまざまな部分を更新します。基本的に、日付が変更されたときに呼び出される関数を作成しようとしています。しかし、私は私の試みに失敗しました。現在、私は以下を試しています

$('#myDatePicker').datetimepicker({
  change: function() {
    alert('date has changed!');
  }                  
});

残念ながら、change関数は実行されません。日付ピッカーで日付が変更されたときに関数を呼び出すにはどうすればよいですか？

twitter-bootstrapbootstrap-4datepickereonasdan-datetimepicker
6
user687554

Bootstrap 4

Eonasdan datepickerプラグインは、Bootstrap 4ではサポートされなくなりましたが、新しいプラグインがあります： https://tempusdominus.github.io/bootstrap-4

「Tempus Dominusは、非常に人気のあるEonasdan/bootstrap-datetimepickerの後継です」

変更イベントを検出するには、以下を使用します。

$("#datetimepicker1").on("change.datetimepicker", function (e) {
    if (e.oldDate !== e.date) {
        alert('You picked: ' + new Date(e.date).toLocaleDateString('en-US'))
    }
})

Datepickerデモ： https://codeply.com/p/kS0t1Ko61K

Bootstrap 3（元の回答）

ドキュメント によると、イベントはdp.change：

$('#myDatePicker').datetimepicker().on('dp.change',function(e){
    console.log(e)
})

http://www.codeply.com/go/5cBJkEHiAt

5
Zim

あなたはこれを試すことができます：

$("#myDatePicker").datetimepicker().on('changeDate', function(e) {
    alert('date has changed!');
});

ブートストラップドキュメントリファレンス： changeDate

4
Lahiru

Bootstrap datepickerの場合、人々がそれを探している場合、イベントはchangeDateです： Docs

$("input[name='Date']").datepicker().on('changeDate', function (e) {
  console.log(e); //Where e contains date, dates and format
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/4.1.1/js/bootstrap.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>

<input name="Date"/>
1
Gizmo3399