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>

Does this answer your question? [How do I clear/reset the selected dates on the jQuery UI Datepicker calendar?](https://stackoverflow.com/questions/9435086/how-do-i-clear-reset-the-selected-dates-on-the-jquery-ui-datepicker-calendar) — oguzhancerit, Dec 17 '20 at 14:39

score 1 · Answer 1 · answered Jun 22 '22 at 10:59

Initially when you have the input empty and you are going to select a range, the current day appears marked in blue. You can replicate this behavior with this code:

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

When the Clear button is pressed, the input will be empty.

If you click on the input to select a range, the current day will be shown again in blue (the previous range will not be shown).

Daterangepicker Clear UI datepicker selected date

1 Answers1