When I first implemented the date form input without the "datepicker" class, it worked fine in Google Chrome but not in Firefox. So, I decided to add the class along with its associated scripts and styles. This fixed the issue in Firefox, but now two datepicker widgets show up in Google Chrome causing confusion as the jQuery datepicker widget cannot be used as intended.
Below is a snippet of my code:
<div class="form-group">
<label class="control-label col-sm-2">Tanggal lahir :</label>
<div class="col-sm-10">
<input type="date" class="form-control datepicker" name="tglLahir">
</div>
</div>
<link rel="stylesheet" type="text/css" href="../js/jquery-ui.css">
<script type="text/javascript" src="../js/external/jquery/jquery.js"></script>
<script type="text/javascript" src="../js/jquery-ui.js"></script>
<script type="text/javascript">
$( ".datepicker" ).datepicker();
</script>
</div>
Screenshot :
Apologies for any language errors.