bootstrap 日期选择器发生变化

Question

我有一个 bootstrap 日期选择器，我想在日期更改时提醒它，但它的工作方式有所不同

我正在尝试使用简单的 jquery on.(change) 事件，因此它会执行两次，一次是在用户单击日期选择器图标时执行，另一次是在用户选择日期时执行

代码

$('#deliveryDate').datepicker({
  format: 'dd/mm/yyyy',
});
$("#deliveryDate").on("change", function(e) {
  alert("hi")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />

<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<div class=" col-lg-3">
  <label for="deliveryDate" id="commonHeader"> Date:</label>
  <input type="text" id="deliveryDate" name="deliveryDate" width="176" />
</div>

我试过了

$("#deliveryDate").on("dp.change", function(e) {
    alert('date');
});

但是这个不行

我想做的是当用户选择日期时，警报应该不会在点击日期选择器时出现

Answer 1

您可以比较数值，当有变化时，触发警报

$("#deliveryDate").datepicker({
  format: 'dd/mm/yyyy',
});

var lastValue = null;

$("#deliveryDate").on("change", function(e) {

  if(lastValue !== e.target.value){
    alert("hi");
    console.log(e.target.value);
    lastValue = e.target.value;
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />

<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<div class=" col-lg-3">
  <label for="deliveryDate" id="commonHeader"> Date:</label>
  <input type="text" id="deliveryDate" name="deliveryDate" width="176" />
</div>

Answer 2

您只需将 "change" 替换为 "focusout"：希望这对你有帮助：

$('#deliveryDate').datepicker({
  format: 'dd/mm/yyyy',
});
$("#deliveryDate").on("focusout", function(e) {
  e.preventDefault();
  alert("hi")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />

<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<div class=" col-lg-3">
  <label for="deliveryDate" id="commonHeader"> Date:</label>
  <input type="text" id="deliveryDate" name="deliveryDate" width="176" />
</div>

bootstrap 日期选择器发生变化

bootstrap datepicker on change

javascript

jquery

bootstrap-datepicker