I am working on two simple single page applications that are using the Shield UI basic JavaScript framework to add datepicker functionality. Both projects are setup essentially the same, with slight differences in my added CSS classes and the way components are laid out / structured. My datepicker is working in both applications, but in one the calendar icon is displayed, and the other it isn’t. I’ve verified that I have the proper CSS and JavaScript files are present in both projects, and both have the Shield UI sprite. What am I missing that might be causing this?
Here’s the relevant Head links in project 1 (note that I pull the all.min.css file out of the associated theme):
<head>
<link rel="stylesheet" type="text/css" href="css/all.min.css">
<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="js/shieldui-all.min.js"></script>
</head>
<body>
<div class="md-label-div hidden" id="insurance-div">
<span class="no-margin-top md-label-date">Insurance expiration date:</span>
<span class="md-label">
<input id="datepicker1" class="md-input-date" name="insurance-date">
</span>
</div>
</body>
<script>
ons.ready(function(){
$(function () {
$("#datepicker1").shieldDatePicker({
</script>
…and here is project 2 (this is the one where the icon is working properly):
<head>
<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="js/shieldui-all.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/all.min.css">
</head>
<body>
<div style="padding-top: 10px; margin-top: 10px;">
<p style="margin-bottom: 4px;">
<label for="date">Date:</label>
</p>
<p style="margin-top: 0;">
<input id="date" class="date" />
</p>
</div>
</body>
<script>
$(document).ready(function() {
$("#date").shieldDatePicker();
});
</script>