Bootstrap DatePicker - Onchange

Question

我正在使用 Bootstrap 3 Datepicker 插件。当用户选择日期时，我想更新 UI 的各个部分。我基本上是在尝试创建一个在日期更改时调用的函数。但是，我的尝试没有成功。目前，我正在尝试以下

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

不幸的是，change 函数永远不会触发。如何在日期选择器中更改日期时调用函数？

Answer 1

你可以试试这个：

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

Bootstrap 文档参考：changeDate

Answer 2

Bootstrap 4

eonasdan datepicker 插件在 Bootstrap 4 中不再支持，但有一个新插件：https://tempusdominus.github.io/bootstrap-4

"Tempus Dominus is the successor to the very popular Eonasdan/bootstrap-datetimepicker"

要检测更改事件，请使用：

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

日期选择器演示：https://codeply.com/p/kS0t1Ko61K

Bootstrap 3（原答案）

根据the docs，事件是dp.change:

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

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

Answer 3

OnChange : Function(data)
{
valueAccessor()(data);
}

Answer 4

对于 Bootstrap 日期选择器，事件是 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"/>

Bootstrap DatePicker - Onchange

Bootstrap DatePicker - Onchange

datepicker

twitter-bootstrap

eonasdan-datetimepicker

bootstrap-4