Components menu
Date picker
The date picker is a handy component that allows users to select dates with a user-friendly interface. You can customise the date format to suit your needs.
About this component
The date picker is a component that helps users to complete date input fields. Users can select a specific date from a calendar. The date picker works with keyboard, mouse or touch screen.
Why we use this component
The date picker is a progressive enhancement to text inputs that lets users choose a date from a calendar interface.
Being able to choose a date from a calendar can be helpful when the day of the week is important to the choice of date.
Keyboard support
Users can navigate the calendar by using the cursor keys to move around the calendar, and can use the enter key or spacebar to select a date.
Use dd/mm/yyyy format. For example, 31/01/2026
HTML
<div class="form-group">
<label class="form-label" for="datepicker">Select a date</label>
<div class="input-group date mb-3">
<input id="datepicker" type="text" class="form-control" aria-describedby="datepicker-help">
<span class="input-group-text">
<i class="fa-solid fa-calendar-days" aria-hidden="true"></i>
</span>
</div>
<div class="form-text" id="datepicker-help">
Use dd/mm/yyyy format. For example, 31/01/2026
</div>
</div>
CSS
<!-- Bootstrap 5 Datepicker CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
/* Date picker
------------------------------------ */
.datepicker td, .datepicker th {
width: 35px;
height: 30px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.datepicker table tr td.today, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today:hover {
background-color: var(--scottish-teal);
background-image: -moz-linear-gradient(to bottom, #016574, #016574);
background-image: -ms-linear-gradient(to bottom, #016574, #016574);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#016574), to(#016574));
background-image: -webkit-linear-gradient(to bottom, #016574, #016574);
background-image: -o-linear-gradient(to bottom, #016574, #016574);
background-image: linear-gradient(to bottom, #016574, #016574);
color: #ffffff !important;
}
.datepicker table tr td.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active:hover {
background-color: var(--verdant-green);
background-image: -moz-linear-gradient(to bottom, #40c47b, #40c47b);
background-image: -ms-linear-gradient(to bottom, #40c47b, #40c47b);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#40c47b), to(#40c47b));
background-image: -webkit-linear-gradient(to bottom, #40c47b, #40c47b);
background-image: -o-linear-gradient(to bottom, #40c47b, #40c47b);
background-image: linear-gradient(to bottom, #40c47b, #40c47b);
color: #000000 !important;
}
JavaScript
<!-- Datepicker JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<!-- Datepicker -->
<script>
$(function() {
$('#datepicker').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
todayHighlight: true,
});
});
</script>