<!-- Material Design for Bootstrap fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Material Design for Bootstrap CSS -->
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/mdb.css" rel="stylesheet" />
 
<script src="~/Scripts/jquery-3.3.1.js"></script> 
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->    
<script src="~/Scripts/umd/popper.js"></script>   
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/mdb.js"></script>

Then my straightforward datepicker:

<div class="md-form">
    <label for="date-picker-example1">Try me...</label><br />
    <input placeholder="Selected date" type="text" id="date-picker-example1" class="form-control datepicker">
</div>

And the JS

$(document).ready(function () {
    $('#date-picker-example1').pickadate();
});

The pickadate is undefined and so the great calendar does not pop up.

Would appreciate help.  Thank you.