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

Question

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 this code, 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>