How to add or show "Clear" button in daterangepicker?

[hilmihidyt]

I created a date filter feature with daterangepicker. The concept is almost the same as the date selection feature on AirBnB to see property prices on the selected date. I have created the code below. With these codes, the calendar that I want to display for the user to select the date does not display a "Clear" button. How do I add or show the Clear button in daterangepicker?

<div class="input-group h-50px">
    <div class="form-floating">
        <input type="text" id="checkin" name="checkin" aria-label="Check-in" class="form-control border-bottom-left-radius-0" placeholder="Check-in">
        <label for="checkin">Check-in</label>
    </div>
    <div class="form-floating">
        <input type="text" id="checkout" name="checkout" aria-label="Check-out" class="form-control border-bottom-right-radius-0" placeholder="Check-out">
        <label for="checkout">Check-out</label>
    </div>
</div>

<script>
    $(document).ready(function() {
        var nightlyPrice = parseInt('{{ $property->nightly_price }}');
        var monthlyPrice = parseInt('{{ $property->monthly_price }}');
        var maxGuests = parseInt('{{ $property->max_guest }}');
        var maxPets = parseInt('{{ $property->max_pets_allowed }}');
        var totalAdults = parseInt($('#adults').html());
        var totalChildren = parseInt($('#children').html());
        var totalGuests = totalAdults + totalChildren;
        var disabledDates = @json($disabledDates);

        var startdate = moment().format("MM/DD/YYYY");
        var enddate = moment().add(7, 'days').format("MM/DD/YYYY");

        if($('#checkin, #checkout').length){
            var currentDate = moment().format("MM/DD/YYYY");
            $('#checkin, #checkout').daterangepicker({
                locale: {
                    format: 'MM/DD/YYYY',
                    cancelLabel: 'Clear'
                },
                "startDate": startdate,
                "endDate": enddate,
                "alwaysShowCalendars": true,
                "minDate": currentDate,
                "isInvalidDate": function(date) {
                    var formatted = date.format('YYYY-MM-DD');
                    return disabledDates.indexOf(formatted) != -1;
                },
                autoApply: true,
                autoUpdateInput: false,
                "opens": "left",
                "buttonClasses": "btn",
                "applyButtonClasses": "btn-primary",
                "cancelClass": "btn-secondary",
            },
            function(start, end, label) {
                var selectedStartDate = start.format('MM/DD/YYYY'); // selected start
                var selectedEndDate = end.format('MM/DD/YYYY'); // selected end

                $checkinInput = $('#checkin');
                $checkoutInput = $('#checkout');

                $checkinInput.val(selectedStartDate);
                $checkoutInput.val(selectedEndDate);

                var checkOutPicker = $checkoutInput.data('daterangepicker');
                checkOutPicker.setStartDate(selectedStartDate);
                checkOutPicker.setEndDate(selectedEndDate);

                var checkInPicker = $checkinInput.data('daterangepicker');
                checkInPicker.setStartDate(selectedStartDate);
                checkInPicker.setEndDate(selectedEndDate);

                $('input[name=start_date]').val(moment(selectedStartDate, 'MM/DD/YYYY').format('YYYY-MM-DD'));
                $('input[name=end_date]').val(moment(selectedEndDate, 'MM/DD/YYYY').format('YYYY-MM-DD'));

                var nights = moment(selectedEndDate, 'MM/DD/YYYY').diff(moment(selectedStartDate, 'MM/DD/YYYY'), 'days');
                var totalPrice = 0;
                if(nights > 0) {
                    if(nights < 30) {
                        totalPrice = nights * nightlyPrice;
                        $('#price-calculation').html('$ ' + nightlyPrice + ' x ' + nights + ' nights');
                        $('#total-price').html('$ ' + totalPrice.toLocaleString("en-US"));
                        $('#price-type').html('night');
                        $('#price').html('$ ' + nightlyPrice.toLocaleString("en-US"));
                        $('#total-length-of-stay').html(nights + ' nights');
                        $('#period-of-stay').html(moment(selectedStartDate, 'MM/DD/YYYY').format('MMM DD, YYYY') + ' - ' + moment(selectedEndDate, 'MM/DD/YYYY').format('MMM DD, YYYY'));
                        $('#monthly-rate').addClass('d-none');
                        $('#price-type-text').html('Daily rate');
                        $('#utilities').addClass('d-none');
                        $('#insurance').addClass('d-none');
                        $('#refundable-security-deposit').addClass('d-none');
                        $('#cleaning-fee').html('Cleaning fee');
                        $('#total-cleaning-fee').html('$280');
                        $('#total-charges').html('$' + (Math.round(nightlyPrice * nights + 280)).toLocaleString("en-US"));
                        $('#total-agency-fee').html('$' + (Math.round((totalPrice * nights) * 0.06)).toLocaleString("en-US"));
                        $('#rent-price').html('$' + (Math.round(nightlyPrice)).toLocaleString("en-US"));
                        $('#total-rent-price').html('$' + (Math.round(nightlyPrice * nights)).toLocaleString("en-US"));
                        $('#payable').html('$' + (Math.round(((nightlyPrice * nights) + 280) + ((nightlyPrice * nights + 280) * 0.06))).toLocaleString("en-US"));
                    } else {
                        totalPrice = monthlyPrice * (nights / 30)
                        insuranceFee = 110;
                        totalInsuranceFee = 110 * (nights / 30);
                        utilityFee = 225;
                        totalUtilityFee = 225 * (nights / 30);
                        monthlyPriceSummation = monthlyPrice + insuranceFee + utilityFee;
                        totalMonthlyPriceSummation = Math.round(totalPrice + totalInsuranceFee + totalUtilityFee);
                        securityDeposit = 1500;

                        $('#price-calculation').html('$ ' + monthlyPrice + ' x ' + nights + ' nights');
                        $('#total-price').html('$ ' + totalPrice.toLocaleString("en-US"));
                        $('#price-type').html('month');
                        $('#price').html('$ ' + monthlyPrice.toLocaleString("en-US"));
                        $('#total-length-of-stay').html(nights + ' nights');
                        $('#period-of-stay').html(moment(selectedStartDate, 'MM/DD/YYYY').format('MMM DD, YYYY') + ' - ' + moment(selectedEndDate, 'MM/DD/YYYY').format('MMM DD, YYYY'));
                        $('#monthly-rate').removeClass('d-none');
                        $('#price-type-text').html('Monthly rate');
                        $('#utilities').removeClass('d-none');
                        $('#insurance').removeClass('d-none');
                        $('#refundable-security-deposit').removeClass('d-none');
                        $('#cleaning-fee').html('Cleaning fee');
                        $('#total-cleaning-fee').html('$280');

                        $('#monthly-price').html('$' + (monthlyPriceSummation).toLocaleString("en-US"));
                        $('#total-monthly-price').html('$' + (totalMonthlyPriceSummation).toLocaleString("en-US"));

                        $('#total-charges').html('$' + (Math.round(totalMonthlyPriceSummation + 280)).toLocaleString("en-US"));
                        $('#total-agency-fee').html('$' + (Math.round((totalMonthlyPriceSummation + 280) * 0.06)).toLocaleString("en-US"));
                        $('#security-deposit-value').html('$' + (Math.round(securityDeposit)).toLocaleString("en-US"));

                        $('#utility-fee').html('$' + (Math.round(utilityFee)).toLocaleString("en-US"));
                        $('#total-utility-fee').html('$' + (Math.round(totalUtilityFee)).toLocaleString("en-US"));
                        
                        $('#insurance-fee').html('$' + (Math.round(insuranceFee)).toLocaleString("en-US"));
                        $('#total-insurance-fee').html('$' + (Math.round(totalInsuranceFee)).toLocaleString("en-US"));
                        
                        $('#rent-price').html('$' + (Math.round(monthlyPrice)).toLocaleString("en-US"));
                        $('#total-rent-price').html('$' + (Math.round(totalPrice)).toLocaleString("en-US"));

                        $('#payable').html('$' + (Math.round((totalMonthlyPriceSummation + 280) + ((totalMonthlyPriceSummation + 280) * 0.06) + securityDeposit)).toLocaleString("en-US"));
                    }
                } else {
                    $('#price-calculation').html('$ 0 x 0 nights');
                    $('#total-price').html('$ 0');
                }
            });
        } // End Daterange Picker
    });
</script>

Thank you

[dangrossman]

autoApply: false

[hilmihidyt]

But I don't want an "Apply" button; I wish to a "Clear" button. So, when the user selects a check-out date, it will automatically apply the selected date range. Is this possible?

[dangrossman]

There's not a setting that will make that happen. But, it's open source code. Find the part that hides the apply and clear buttons when auto apply is true, and change it to only hide the apply button in your copy.

[hilmihidyt]

And how to hide the selected date to the left of the Clear button?