时间戳

首页 > 解决方案 > JS DateTimePicker onChange 事件不起作用

javascript - JS DateTimePicker onChange 事件不起作用

问题描述

JS datetimepickeronChange事件根本不起作用。

我试过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 库才能使其正常工作？感谢你的帮助。

标签： javascriptjqueryhtmlbootstrap-4

解决方案

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

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

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

推荐阅读