How to disable the Daterangepicker default value?

[heyitsmi]

How to disable the Daterangepicker default value? I used daterangepicker to create a property availability filter feature based on date range. Here, I have created code like this, but the problem is that daterangepicker displays the default date today. How to disable the default value?

<input type="text" id="dates" class="form-control filter-field" placeholder="Enter dates" aria-label="Dates">

    var dates = [];

    $(document).ready(function(){
        //filter by dates
        $('#dates').daterangepicker({
            defaultDate: null,
            opens: 'left',
            locale: {
                format: 'YYYY-MM-DD'
            }
        }, function(start, end, label) {
            dates = [start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD')];
            filterProperty();
        });
    })

[dangrossman]

There is always a selected date on this calendar. It is not possible to change that. You might consider using a "clear" button, like this example: https://www.daterangepicker.com/#example5

[pjdupreez]

I have 2 date ranges on my form which may be mutually exclusive. So this is slightly problematic.

I think it would be beneficial to allow the date range picker to initialise without a value, or to have a method to clear the selected dates.

At the moment I am using $('#MyDate').daterangepicker({ startDate: null, endDate: null }); after initialisation, but it feels dirty... and $('#MyDate').val() is Invalid date - Invalid date, so I have to cater for this as well.