How to detect selecting the date in daterangepicker

Question

I am using daterangepicker with time. I have from and to date with time in the picker with options of choosing last 1 days, 7 days, 30 days and custom range. If I choose custom range , if the end date is today, time should be current time. Else i need to set the time to 11.59 pm . I am using moment and i am not able to find any onselect event for daterange picker. Nothing works when date is changed

  (document).ready(function () {
      var date = new Date();
      var currentMonth = date.getMonth();
      var currentDate = date.getDate();
      var currentYear = date.getFullYear();
          if ((window.location.href).indexOf('fraud_search') > -1) {
              var start_date = $('#fraud_start_date_utc');
              var end_date = $('#fraud_end_date_utc');
              var date_display_span = $('#fd_date_range span');
              var start_date_value = moment(start_date.val(), FRAUD_API_DATE_FORMAT).startOf('day');
              var end_date_value;

              function compare(dateTimeA, dateTimeB) {
                  var momentA = moment(dateTimeA,FRAUD_API_DATE_FORMAT);
                  var momentB = moment(dateTimeB,FRAUD_API_DATE_FORMAT);
                  if (momentA > momentB) return 1;
                  else if (momentA < momentB) return -1;
                  else return 0;
              }

              var comparedTime = compare(moment(end_date.val(), FRAUD_API_DATE_FORMAT), moment(FRAUD_API_DATE_FORMAT).utc());
              console.log(comparedTime);
              if(comparedTime != 0) {
                  end_date_value = moment(end_date.val(), FRAUD_API_DATE_FORMAT).endOf('day').hour(23).minute(59);
                  alert("alidsg");
              }
              else {
                  end_date_value = moment(end_date.val(), FRAUD_API_DATE_FORMAT);
                  alert("same day");
              }
             function cb(start, end) {
                  date_display_span.html(start.format(FRAUD_DASHBOARD_DATE_DISPLAY_FORMAT) + ' - ' + end.format(FRAUD_DASHBOARD_DATE_DISPLAY_FORMAT));
                  start_date.val(start.format(FRAUD_API_DATE_FORMAT));
                  end_date.val(end.format(FRAUD_API_DATE_FORMAT));
                  alert("A new date range was chosen: " + start.format(FRAUD_API_DATE_FORMAT) + ' to ' + end.format(FRAUD_API_DATE_FORMAT));
                  $('#fraud_search_crit_form').submit();
              }

              $('#fd_date_range').daterangepicker({
                  applyClass: "btn-primary",
                  startDate: start_date_value,
                  endDate: end_date_value,
                  maxDate: moment().utc(),
                  minDate: moment().subtract(fraud_search_max_from_date_time_gap, "days"),
                  dateLimit: {
                      "days": fraud_search_max_time_gap
                  },
                  timePicker: true,
                  timePicker24Hour: false,
                  locale: {
                      format: 'MM/DD/YYYY H:mm'
                  },
                  autoApply: true,
                  ranges: {
                      'Today': [moment.utc().startOf('day'), moment.utc()],
                      'Last 1 Day': [moment.utc().subtract(1, 'days').startOf('day'), moment.utc().endOf('day').hour(23).minute(59)],
                      'Last 7 Days': [moment.utc().subtract(6, 'days').startOf('day'), moment.utc().endOf('day').hour(23).minute(59)],
                      'Last 30 Days': [moment.utc().subtract(29, 'days').startOf('day'), moment.utc().endOf('day').hour(23).minute(59)]
                  },
                  onChange: function(dateText, inst) {
                      alert("alert");
                  }
              }, cb).on("change", function() {
                  alert("function called");
                  display("Change event");
              });

HTML

  <div class="col-sm-3">
          <div class="filter-form__field form-group" id="fd_range_picker">
            <label class="control-label" for="timePeriod">Time Period</label>
            <div class="form-group">
              <%= content_tag(:div, content_tag(:span, '', id: "fd_range",) + content_tag(:b, '', class: 'caret'), class: "selectbox pull-left", id: 'fd_date_range') %>
              <%= hidden_field_tag :fraud_start_date_utc, params[:fraud_start_date_utc] %>
              <%= hidden_field_tag :fraud_end_date_utc, params[:fraud_end_date_utc] %>
              <%= hidden_field_tag :per_page, params[:per_page] %>
            </div>
          </div>
        </div>

Answer 1

I think you are using this library : http://www.daterangepicker.com/#options

And in order to check the selected date please use this event :

$('#daterange').on('apply.daterangepicker', function(ev, picker) {
    console.log(picker.startDate.format('YYYY-MM-DD'));
    console.log(picker.endDate.format('YYYY-MM-DD')); 
});