使用 datetime-picker 选择日期/时间时触发事件答案

【问题标题】：Trigger an event when selecting a date/time with datetime-picker使用 datetime-picker 选择日期/时间时触发事件
【发布时间】：2017-11-14 07:44:47
【问题描述】：

我目前在我的代码中使用this datetimepicker（无图标（仅限输入字段）），一旦选择了日期时间，我需要触发一个函数。我尝试使用几个 jQuery 函数，但我会得到不同的错误，这里是我使用的：

$('#datetimepicker4').datetimepicker({
    onClose: function (dateText, inst) {
        alert("date chosen");                                              
    }
});

我收到此错误

TypeError: 无法识别 onClose 选项！

和onSelect 类似，当我使用datepicker instead

$('#datetimepicker4').datepicker({
    onClose: function (dateText, inst) {
        alert("date chosen");                                              
    }
});

我得到这个错误：

TypeError: $(...).datepicker 不是函数

ps：我正在使用 jQuery 1.11.3 并使用 firefox 运行代码。

编辑：dp.change 解决了问题

【问题讨论】：

您是否检查了该页面上的“事件”选项卡？ eonasdan.github.io/bootstrap-datetimepicker/Events - 特别是 dpchange eonasdan.github.io/bootstrap-datetimepicker/Events/#dpchange
我刚查了一下，真的很有帮助，谢谢:)
@heba 发布一个答案（并接受它）描述有效的解决方案，而不是编辑您自己的问题来添加解决方案。
@VincenzoC 我的答案被转换为评论，因为我猜它太短了
@heba 没有自动将答案转换为 cmets，但非常简短的答案不是很有用，它们往往会吸引反对票，有时会被删除。我建议发布一个好的答案（例如解决方案的解释、文档链接和/或引号、工作代码示例等），我发布了一个答案来展示一个不太短的示例以及如何在您的用例中使用dp.change。

标签： javascript jquery datepicker datetimepicker eonasdan-datetimepicker

【解决方案1】：

Eonasdan datetimepicker 没有onClose 选项，您可以为dp.change 事件添加处理程序：

日期更改时触发。

参数：

e = {
  date, //date the picker changed to. Type: moment object (clone)
  oldDate //previous date. Type: moment object (clone) or false in the event of a null
}

这是一个现场样本：

$('#datetimepicker4').datetimepicker()
  .on('dp.change', function(e){
    if(e.date){
      console.log('Date chosen: ' + e.date.format() );
    }
  });

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>


<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <input type='text' class="form-control" id='datetimepicker4' />
    </div>
  </div>
</div>

【讨论】：