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 所说，您必须使用库提供的events。

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

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

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

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

您可以运行下面的 sn-p 并更改日期以查看一个事件的多个警报。

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

运行下面的 sn-p 并更改日期以查看单个警报。

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

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

您可以将 jQuery 的“on”功能与库定义并在文档中指明的自定义事件“change.datetimepicker”一起使用 (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');
});