загрузчик DatePicker при изменении - PullRequest
Новая
       8

загрузчик DatePicker при изменении

0 голосов
/ 02 апреля 2019

У меня есть средство выбора даты начальной загрузки, которое я хочу предупредить, когда дата изменяется, но это работает что-то другое

Я пытаюсь с простым событием 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');
});

, но этот не работает

, что я пытаюсь сделать, когдапользователь выбирает дату, после чего предупреждение должно приходить не по щелчку даты

Ответы [ 2 ]

2 голосов
/ 02 апреля 2019

Можно сравнивать значения, а при наличии ошибок вызывать предупреждение 

$('#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>
0 голосов
/ 02 апреля 2019

все, что вам нужно, чтобы заменить «изменить» на «фокус»: надеюсь, это поможет вам: 

$('#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>
...