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

Issue

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

Solution

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>

Answered By – Kinglish

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.