JQuery UI Datepicker not functioning

Question

I am running into an issue where I feel as though I have everything set up correctly; but, no matter what, the JQuery UI Datepicker will not show up.

I have the following set up in my header (Angular project, header is always loaded no matter the route):

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

As well as this

<script type="text/javascript">
    $(function() {
        var nativeDateInputIsSupported = Modernizr.inputtypes.date;
        if (!nativeDateInputIsSupported) {
            $("input[type='date']").datepicker();            
        }
    });
</script>

However when I am in Firefox and click on the following, nothing happens

<tr ng-repeat="revenue in runway.revenues">
<!-- Other table elements go here -->
<td> 
   <input type="date" id="date" max="{{maxDate}}" class="form-control" ng-model="revenue.date" placeholder="YYYY-MM-DD" required/> </td>
<td>

It also does not show up here

<input type="date" class="form-control" ng-model="user.startofbusiness" name="startofbusiness" id="startofbusiness" required>

I've checked many different StackOverflow threads but even when I follow the methodologies put forth by them, I can't get it to cooperate.

Any tips would be greatly appreciated!

Answer 1

As it turns out, this was implemented correctly, and is actually working. The issue was with regards to having used ng-repeat to generate the table's information dynamically. I am addressing this by writing a custom directive to handle the datepicker.