<input type="text" class="form-control form-calender-icon" placeholder="Start Date - End Date" name="datefilter" value="" aria-label="Date Range Picker" aria-describedby="daterangepicker" autocomplete="off">

$('input[name="datefilter"]').daterangepicker({
    autoUpdateInput: false,
    showDropdowns: true,
    locale: {
        cancelLabel: 'Clear'
      },
    "cancelClass": "btn-outline-secondary"
  });

  $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
      $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
  });

  $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
  });