Daterangepicker 清除 UI datepicker 选择的日期

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>

Answer 1

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).