Use Attribute String[] (2 Dimensional Javascript Array)

Question

I have a Lightning component with a Javascript jQuery Data Picker for use in a Flow Screen to create child "Subscription" records. I have configured the Javascript to allow input of Date Ranges and restrict already selected Date Ranges when creating the child records.
I would like to store the previously selected Date Ranges on the parent record and pass this to the jQuery component via the Flow.

When I set the 2 Dimensional Array statically in the Javascript this properly restricts the multiple ranges However when I try to pass this as aura attribute with type="String[] only the Start and end Dates of each range are restricted.
How can I adjust my Component and/or Javascript to support restricting the multiple ranges?

Component

<aura:component implements="lightning:availableForFlowScreens" access="global">
    <!-- Component Attributes--> 
    
    <aura:attribute name="restrictedDates" type="String[]" />

    <!--add jQuery UI style CSS file and jQuery, jQuery UI javaScript files-->
    
    <ltng:require styles="{! $Resource.jQuery_UI + '/jquery-ui-1.12.1/jquery-ui.min.css'}" 
                  scripts="{!join(',', 
                           $Resource.jquery224 ,   
                           $Resource.jQuery_UI + '/jquery-ui-1.12.1/jquery-ui.min.js')
                           }" afterScriptsLoaded="{!c.scriptsLoaded}"/>
    
    <input type="text" class="slds-input" id="datepickerId" />
</aura:component>

Javascript

({
    scriptsLoaded : function(component, event, helper) {

        //var date_range = [["07-03-2022","07-05-2022"],["07-09-2022","07-11-2022"]];
        var date_range = component.get('v.restrictedDates');
        
        $(document).ready(function(){ 
          //Restrict past date selection in date picker  
            $( "#datepickerId" ).datepicker({ 
                minDate: "-1D", 
                maxDate: "+1Y",
                dateFormat : "mm-dd-yy",    
                numberOfMonths: 1,
                showAnim : "fadeIn",
                onSelect: function( selectedDate ) {
        
                    if(!$(this).data().datepicker.first){
                        $(this).data().datepicker.inline = true
                        $(this).data().datepicker.first = selectedDate;
                        $(this).data().datepicker.s_first = selectedDate;
                        delete $(this).data().datepicker.s_second;
                    }else{
                        if(selectedDate > $(this).data().datepicker.first){
                            $(this).data().datepicker.s_second = selectedDate;
                            $(this).data().datepicker.s_first = $(this).data().datepicker.first;
                            $(this).val($(this).data().datepicker.first + " to " + selectedDate);
                            //$(this).val("\[\"" + $(this).data().datepicker.first +"\"" + "," + "\"" + selectedDate + "\"\]");
                        }else{
                            $(this).val(selectedDate + " to " + $(this).data().datepicker.first);
                            //$(this).val("\[\"" + selectedDate +"\"" + "," + "\"" + $(this).data().datepicker.first + "\"\]");
                            $(this).data().datepicker.s_second = $(this).data().datepicker.first;
                            $(this).data().datepicker.s_first = selectedDate;
                        }
                        $(this).data().datepicker.inline = true;
        
                        var $this = $(this);
                        setTimeout(function(){
                            $this.datepicker("hide");
                            $this.data().datepicker.inline = false;
                        },750)
                    }
                    $(this).datepicker("show"); // update the dates
        
                },
                beforeShowDay: function(date) {
            
                    var string = $.datepicker.formatDate('mm-dd-yy', date);
        
                    for (var i = 0; i < date_range.length; i++) {
                        
                        if (Array.isArray(date_range[i])) {
                            
                            var from = new Date(date_range[i][0]);
                            var to = new Date(date_range[i][1]);
                            var current = new Date(string);
                            
                            if (current >= from && current <= to) return false;
                        }
                        
                    }
                    return [date_range.indexOf(string) == -1]
                },
                onClose:function(){
        
                    delete $(this).data().datepicker.first;             
                    $(this).data().datepicker.inline = false;
                    $(this).blur()
        
                }
            });
        });
    },
    
    getVal : function(component,event,helper){
        // to get selected date value using jQuery  
        var oDate = $('#datepickerId').val();
        alert(oDate);
        
    }  
})

Answer 1

Because you are passing in an array of strings (String[]), you, by definition must be passing in something like this:

['["07-03-2022","07-05-2022"]','["07-09-2022","07-11-2022"]'];

Which is actually ['string','string']

This is not going to work when you pass it to the date picker.

You could try to parse each string in this array in a forEach loop or map, eg:

let restrictedDatesRaw = component.get('v.restrictedDates');
let restrictedDates = restrictedDatesRaw.map(datestring => JSON.parse(datestring));

or you could pass a completely stringified array to the component:

<aura:attribute name="restrictedDates" type="String" />

Then parse:

let restrictedDates = JSON.parse(component.get('v.restrictedDates'));

Which one you pick is up to you.