How to set the default value of Date Range Picker to null

Question

I am using Laravel framework. I want to create a date range filter using ajax. but I have a problem with the daterangepicker that I use

this is my view

this is the field code

<input type="text" class="form-control filter" id="filter-date">

this is the javascript code to call daterangepicker

    $(function () {
    //Date range picker

    $('#filter-date').daterangepicker({
      autoUpdateInput: true,
      locale: {
          cancelLabel: 'Clear'
      }
    });

    $('#filter-date').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('YYYY/MM/DD') + ' - ' + picker.endDate.format('YYYY/MM/DD'));
    });

    $('#filter-date').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
    });
  })

This is the javascript code to hold the value of daterangepicker, before sending it to the controller using ajax. (accommodated in variable datefilter)

    let datefilter = $("#filter-date").val()
    $(".filter").on('change',function(){
      datefilter = $("#filter-date").val()
      console.log(datefilter)
      table.ajax.reload(null,false)
    })

When I use the code above and console.log(datafilter), the value in datefilter goes straight in, which is today. but I want the first or default value to be null. I managed to change the default value to null with autoUpdateInput: false. but after I fill in the date I want to sent, the value of datefilter is always null. Is there any other way for the default value to be null, but using the autoUpdateInput: false method?

Answer 1

Please try setting autoUpdateInput to false.

Originally Answered by Sumanth Hegde