javascript - bootstrap datepicker on change - Stack Overflow

admin管理员组

文章数量:1331388

I have a bootstrap date picker which i want to alert when date is changed buit it is working something different

i am trying with simple jquery on.(change) event so it is executing two times one when user clicks on datepicker icon and another when user selects the date

CODE

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

<script src=".3.1/jquery.min.js"></script>
<script src=".1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href=".1.2/css/bootstrap.min.css">
<link href="/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />

<script src="/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
<div class=" col-lg-3">
  <label for="deliveryDate" id="monHeader"> Date:</label>
  <input type="text" id="deliveryDate" name="deliveryDate" width="176" />
</div>

I have a bootstrap date picker which i want to alert when date is changed buit it is working something different

i am trying with simple jquery on.(change) event so it is executing two times one when user clicks on datepicker icon and another when user selects the date

CODE

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

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

<script src="https://cdn.jsdelivr/npm/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
<div class=" col-lg-3">
  <label for="deliveryDate" id="monHeader"> Date:</label>
  <input type="text" id="deliveryDate" name="deliveryDate" width="176" />
</div>

I have tried

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

but this one is not working

what i am trying to do is when user selects the date then alert should e not on click of datepicker

• javascript
• jquery
• bootstrap-datepicker

Share Improve this question Follow asked Apr 2, 2019 at 10:57 manish thakurmanish thakur 8201010 gold badges4343 silver badges8282 bronze badges 6

• dp.change works for datetimepicker. stackoverflow./questions/6471959/… – Harshwardhan Sharma Commented Apr 2, 2019 at 11:03
• Possible duplicate of jQuery Datepicker onchange event issue – Refilon Commented Apr 2, 2019 at 11:03
• @Refilon that one is jquery date picker – manish thakur Commented Apr 2, 2019 at 11:07
• @HarshwardhanSharma i am using date-picker only so there is no need to talk about date-time picker – manish thakur Commented Apr 2, 2019 at 11:07
• Possible duplicate of Detect change to selected date with bootstrap-datepicker – reisdev Commented Apr 2, 2019 at 11:10

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

You can pare the values, and when there are chagnes, trigger the alert

$("#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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr/npm/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />

<script src="https://cdn.jsdelivr/npm/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
<div class=" col-lg-3">
  <label for="deliveryDate" id="monHeader"> Date:</label>
  <input type="text" id="deliveryDate" name="deliveryDate" width="176" />
</div>

all you need to replace "change" to "focusout": hope this helps you:

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

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

<script src="https://cdn.jsdelivr/npm/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
<div class=" col-lg-3">
  <label for="deliveryDate" id="monHeader"> Date:</label>
  <input type="text" id="deliveryDate" name="deliveryDate" width="176" />
</div>

本文标签： javascriptbootstrap datepicker on changeStack Overflow