How to force the date filter to pick "from" date before picking "to" date?

Question

I'm using Sitecore 9 and SXA 1.7. I have the SXA date filter component that I am using to filter some results, however, I noticed that it can let me choose the "to/end" date without choosing the "start/from" .. I need to change that behavior, so that it cannot let the user pick an "end" date without picking first the "start" date.

Is there any way to do that without writing custom code? and if the only solution is to customize the component, can anyone help me with an idea on how to achieve that?

Answer 1

Something like that is not possible out of the box. You will need to write some custom code. Try something like that:

1) Disable the second datepicker

2) Use following code to enable the second datepicker when any date will be selected:

$("#fromDate").datepicker({
    // Example options - modify as you need
    numberOfMonths: 1,
    dateFormat: 'dd/mm/yy',
    minDate: 0,

    onSelect: function () {
        var selectedDate = $(this).datepicker('getDate');
        // This function will be called when you will select date in the first datepicker. 
        // Simply enable second datepicker here.
    }
});