<h1 class="mb-4">Vanilla Datepicker for Bootstrap 5</h1>
<h2>Floating label only</h2>
<div class="form-floating mb-4 d-flex">
<input
type="text"
class="datepicker_input form-control border-2"
id="datepicker1"
required
placeholder="DD/MM/YYYY">
<label for="datepicker1">Date input label 1</label>
</div>
<h2>Input group only</h2>
<div class="input-group mb-4">
<i class="bi bi-calendar-date input-group-text"></i>
<input type="text" class="datepicker_input form-control" placeholder="Date input 3 placeholder" required aria-label="Date input 3 (using aria-label)">
</div>
<h2>Floating label & input group</h2>
<div class="form-floating input-group mb-4">
<i class="bi bi-calendar-date input-group-text"></i>
<input type="text" id="datepicker2" class="datepicker_input form-control" placeholder="DD/MM/YYYY" required>
<label for="datepicker2">Date input label 2</label>
</div>
<p>Requires <a target=_blank title="[new window]" href="https://mymth.github.io/vanillajs-datepicker/#/">vanillajs-datepicker</a> plus the usual Bootstrap 5 CSS & JS.</p>
<!-- Footer include -->
[[[https://codepen.io/2kool2/pen/mKeeGM]]]
/* Bootstrap 5 CSS and icons included */
/* vanillajs-datepicker 1.1.4 CSS included */
body {
/* Centring content */
min-height: 100vh;
display: grid;
place-content: center;
}
/* Adapts a floating label for use with a left-handed input group icon */
.form-floating > .bi-calendar-date + .datepicker_input + label {
padding-left: 3.5rem;
z-index: 3;
}
/* Bootstrap 5 JS included */
/* vanillajs-datepicker 1.1.4 JS included */
const getDatePickerTitle = elem => {
// From the label or the aria-label
const label = elem.nextElementSibling;
let titleText = '';
if (label && label.tagName === 'LABEL') {
titleText = label.textContent;
} else {
titleText = elem.getAttribute('aria-label') || '';
}
return titleText;
}
const elems = document.querySelectorAll('.datepicker_input');
for (const elem of elems) {
const datepicker = new Datepicker(elem, {
'format': 'dd/mm/yyyy', // UK format
title: getDatePickerTitle(elem)
});
}
