javascript - Daterangepicker Clear UI datepicker selected date

Question

The below example Daterangepikcer is working fine. Problem with when clearing calendar only. When I click clear button it's only clearing the input field is empty. but I want to clear the daterangepicker calendar as we see when open at the first time.

I tried this but it's not clearing the selected date. Thanks in Advance.

$(this).val('');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="http://www.daterangepicker.com/daterangepicker.js"></script>

<link href="http://www.daterangepicker.com/daterangepicker.css" rel="stylesheet"/>




<input type="text" name="datefilter" value="" />

<script type="text/javascript">
$(function() {

  $('input[name="datefilter"]').daterangepicker({
      autoUpdateInput: false,
      locale: {
          cancelLabel: 'Clear'
      }
  });

  $('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('');
  });

});
</script>

标签： javascriptjquerytwitter-bootstrapdatetimepicker