/* include this in header tag (<head> .. </head>) */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.standalone.min.css" integrity="sha512-TQQ3J4WkE/rwojNFo6OJdyu6G8Xe9z8rMrlF9y7xpFbQfW5g8aSWcygCQ4vqRiJqFsDsE1T6MoAOMJkFXlrI9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
/*include this in footer before closing body tag (</body>), after jquery cdn if used */
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
/* add this in html */
<label for="date" class="form-label">
Due Date <span style="color:red;">*</span>
</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control datepicker" data-date-format="mm/dd/yyyy">
<span class="input-group-addon">
<span class="input-group-text bg-white d-block">
<i class="fa fa-calendar"></i>
</span>
</span>
</div>
/* add this script after bootstrap-datepicker.min.js cdn */
<script type="text/javascript">
$(document).ready(function () {
$('.datepicker').datepicker();
});
</script>