Skip to content

Instantly share code, notes, and snippets.

@jhammad
Created May 18, 2022 15:20
Show Gist options
  • Save jhammad/2ec743b3b0356f5962c7f4c1e1e50391 to your computer and use it in GitHub Desktop.
Save jhammad/2ec743b3b0356f5962c7f4c1e1e50391 to your computer and use it in GitHub Desktop.
Datepicker in Bootstrap 5
<section class="container">
<h2 class="py-2">Datepicker in Bootstrap 5</h2>
<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>
</section>
$(function(){
$('#datepicker').datepicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
.input-group-append {
cursor: pointer;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment