Bootstrap日期选择器 - Onchange

Question

我正在使用Bootstrap 3日期选择器插件。当用户选择日期时，我希望更新我的UI的各个部分。我基本上正在尝试创建一个在日期更改时调用的函数。然而，我一直未能成功。目前，我正在尝试以下操作：

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

很不幸，change函数从未触发。我该如何在日期选择器中更改日期时调用函数？

- user687554

Answer 1

Bootstrap 4

Bootstrap 4不再支持eonasdan日期选择器插件，但有一个新的插件：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'))
    }
})

日期选择器演示：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

- Zim

Answer 2

您可以尝试这样做：

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

Bootstrap doc reference: changeDate

- Lahiru

---

读者们 - 有一个Bootstrap日期时间选择器和一个Bootstrap日期选择器。这经常导致事件和选项名称混淆，例如，这个答案是关于日期选择器，而问题是关于日期时间选择器。 - Yogi

Answer 3

对于Bootstrap日期选择器，事件是changeDate，如果有人在寻找的话：文档

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

- Gizmo3399

Answer 4

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

- user8220317

---

感谢您提供这段代码片段，它可能会立即提供一些帮助。通过展示为什么这是一个好的解决方案，适当的解释将极大地提高其教育价值，并使其对未来有类似但不完全相同的问题的读者更有用。请编辑您的答案以添加解释，并指出适用的限制和假设。 - Toby Speight