i used the daterange picker in my form, how can i get the changed dates in jquery when i click on apply button of date range picker

Question

this is the date range picker in html form

    <div class="form-group " id="input-dates">
    <input class="form-control date-range-picker" id="dateRange" type="text" name="dates" placeholder="<?php echo get_phrase('when'); ?>.." autocomplete="off" required>
    <i class="icon_calendar"></i>
</div>

i have used the on click function for input type but i didn't get the dates in jquery i have also use apply.daterangepicker method

  function myCallback(start, end) {
    $('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    alert('hello world'); //etc, your code here
}
// attach daterangepicker plugin
$('#dateRange').daterangepicker(options, myCallback);

i have also use the above functions but it's not working

Answer 1

I think the bit of code you're looking for is:

$('#dateRange').daterangepicker(options, myCallback)
.on("input change", function (e) {
    console.log("Date changed: ", e.target.value);
});

e.target.value will be the date range, and the function will be triggered by clicking the apply button

My previous answer is below

---

To get the code you have working, just add this line let options = {} before you create your datepicker as you see below. Your question on how to get the changed dates: those are in a form field called dates - when you submit your form, the field with the changed dates is called dates because the element has name="dates". Because that same element has an ID of dateRange, the way you get the value of it before the form submits is $('#dateRange').val()`

function showValues() {
  alert($('#dateRange').val());
  return false;
}


function myCallback(start, end) {
  $('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

}
// attach daterangepicker plugin
/* Make sure you have the options object at least instantiated */
let options = {} // you can add more options to this, but need at least this
$('#dateRange').daterangepicker(options, myCallback)
  .on("input change", function(e) {
    console.log("Date changed: ", e.target.value);
  });

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<form onsubmit="return showValues()">
  <div class="form-group " id="input-dates">
    <input class="form-control date-range-picker" id="dateRange" type="text" name="dates" placeholder="<?php echo get_phrase('when'); ?>.." autocomplete="off" required>
    <i class="icon_calendar"></i>
  </div>

  <button class='btn btn-primary' type='submit'>Submit</button>