JS DateTimePicker onChange 事件不起作用

Question

JS datetimepicker onChange事件根本不起作用。

我试过OnSelect 、 OnClose 、 OnChange 、 OnHide 、 OnChangeMonth来触发datetimepicker事件，但它们都不起作用。

<input type="text" class="form-control datetimepicker-input" id="Datetimepicker" data-toggle="datetimepicker" data-target="#Datetimepicker" autocomplete="off" style="width: 200px;" />

$("#Datetimepicker").datetimepicker({
    format: 'MMM,YYYY',
    defaultDate: today,
    onSelect: function () {
        alert("It works!");
    }
})

$("#Datetimepicker").datetimepicker("change",function(){
    alert("It works!")});


$("#Datetimepicker").datetimepicker("changeDate",function(){
    alert("It works!")});

我尝试了很多方法，但仍然没有一个有效。 我是否需要提供其他一些 js 库才能使其正常工作？ 感谢你的帮助。

Answer 1

正如@Bluety 提到的，您必须使用库提供的事件。

在您的情况下，您可以使用change.datetimepicker事件。 事件处理程序 function 接收旧日期和新日期，可用于您可能需要的任何比较。

$("#Datetimepicker").on("change.datetimepicker", ({date, oldDate}) => {              
                 //Use date and oldDate here
          })

另请注意，在您的情况下，输入元素与日期选择器目标相同，这可能会导致触发重复事件...................................... ..................................................... .....................

id="Datetimepicker" data-toggle="datetimepicker" data-target="#Datetimepicker"

您可以运行下面的代码段并更改日期以查看一个事件的多个警报。

 $("#Datetimepicker").datetimepicker({ format: 'MMM,YYYY', defaultDate: new Date() } ); $("#Datetimepicker").on("change.datetimepicker", ({date, oldDate}) => { console.log("New date", date); console.log("Old date", oldDate); alert("Changed date") })

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" /> <div id="target" style="position:relative" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" id="Datetimepicker" data-toggle="datetimepicker" data-target="#Datetimepicker" autocomplete="off" style="width: 200px;" /> </div>

为避免这种情况，您可以将父级用作data-target 。 这也是示例在文档中的外观

<div id="target" style="position:relative" data-target-input="nearest">
  <input type="text" class="form-control datetimepicker-input" id="Datetimepicker" data-toggle="datetimepicker" data-target="#target" autocomplete="off" style="width: 200px;" />
</div>

运行下面的代码段并更改日期以查看单个警报。

 $("#target").datetimepicker({ format: 'MMM,YYYY', defaultDate: new Date() }); $("#target").on("change.datetimepicker", ({ date, oldDate }) => { console.log("New date", date); console.log("Old date", oldDate); alert("Changed date") })

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" /> <div id="target" style="position:relative" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" id="Datetimepicker" data-toggle="datetimepicker" data-target="#target" autocomplete="off" style="width: 200px;" /> </div>

Answer 2

当我查看文档时，我发现事件已由库定义。

You can use the "on" function of jQuery with a custom event "change.datetimepicker" defined by the library and indicated in the documentation ( https://tempusdominus.github.io/bootstrap-4/Events/ ).

$("#Datetimepicker").on("change.datetimepicker",function(){
    alert("It works!")});

Answer 3

尝试这个：

$("#Datetimepicker").datetimepicker().on('changeDate', function(e) {
  console.log('hey');
});