I am using jquery in my lightning component in the form of a date picker. However I noticed that when initially accessing the account record my lightning component is on it does not load the picker until after i refresh. Once refreshed it loads every single time until I leave the record and return.

E.g. Go to account

1. click the date field
2. no load
3. refresh page
4. click the date field
5. loads
6. go to lead object
7. go back to account
8. click date
9. doesn't load. 

Here's the code from the JS. 
//script used to initialize the JQUERY in the backend
        $(document).ready(function(){ 
          //Restrict past date selection in date picker  
            $( "#datepickerId" ).datepicker({
                beforeShowDay: function(date) {
                   var lastday = function(y,m){
return  new Date(y, m +1, 0);
} 
                   //console.log(lastday(2017,0));
                    var today = new Date();
                    var twoDaysAgo = new Date();
                    var lastUpdated = component.get("v.lastUpdated");
                    var lastUyear = lastUpdated.toString().substring(0,4);
                    var lastUday = lastUpdated.toString().substring(8,10);
                    var lastUmonth = lastUpdated.toString().substring(5,7);
                    var earliestDate = new Date('2017','5','30');
                    var lastUpdatedFormatted = new Date(lastUyear,lastUmonth-1,lastUday);
                    
                    twoDaysAgo.setDate(twoDaysAgo.getDate()-2);
                    var lastDate = lastday(date.getYear(),date.getMonth())
                    var dayOfWeek = lastDate.toString().substring(0, 3);
                    console.log(lastUpdatedFormatted + ' test ' + date); 
                    if( date > earliestDate && date <= lastUpdatedFormatted  && ( date.toString().substring(3, 10) === lastUpdatedFormatted.toString().substring(3, 10) || lastDate.toString().substring(3, 10) === date.toString().substring(3, 10)) ){
                        console.log(date.toString().substring(0, 3));
                        return [true];
                    } 
                    else{
                        return [false];
                    }     
                },
            });           
        });

And the code in the HTML portion of the component. 

<!--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 style = "background-color: var(--lwc-colorBackgroundInput,rgb(255, 255, 255));
    border: var(--lwc-borderWidthThin,1px) solid var(--lwc-colorBorderInput,rgb(221, 219, 218));
    border-radius: var(--lwc-borderRadiusMedium,0.25rem);
    width: 100%;
    transition: border var(--lwc-durationQuickly,0.1s) linear,background-color var(--lwc-durationQuickly,0.1s) linear;
    display: inline-block;
    padding: 0 var(--lwc-spacingMedium,1rem) 0 var(--lwc-spacingSmall,0.75rem);
    line-height: var(--lwc-heightInput,1.875rem);
    min-height: calc(var(--lwc-heightInput,1.875rem) + (1px * 2));" type="text" class="slds-input" id="datepickerId" readonly="true"/>