Hello Dev,
I have tips "How to add Datepicker using Bootstrap 5.3. I hope it helps you a better solution.
Full Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Datepicker demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<!-- Date Picker Css -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
</head>
<body>
<div class="container">
<h3 class="py-2 mb-4">How To Add Bootstrap 5.3 Datepicker</h3>
<form class="row">
<label for="date" class="col-1 col-form-label">Date</label>
<div class="col-5">
<div class="input-group date" id="datepicker">
<input type="text" class="form-control" id="date"/>
<span class="input-group-append">
<span class="input-group-text bg-light d-block">
<i class="fa fa-calendar"></i>
</span>
</span>
</div>
</div>
</form>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Date Picker Js-->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
</body>
<script>
$(function(){
$('#datepicker').datepicker();
});
</script>
</html>Follow for more tips