Bootstrap 5 Datepicker with Vanilla JS

This lightweight vanilla JS code snippet helps you to create datepicker for Bootstrap 5 projects. It comes with easily navigatable days, months, and years with a custom date format. You can set dd/mm/yyyy or any other suitable date format according to your needs. Similarly, you can define the custom titles and CSS styles for datepicker.

How to Create Datepicker for Bootstrap 5

1. First of all, load the Bootstrap 5 framework and datepicker’s CSS into the head tag of your webpage.

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<!-- Vanilla Datepicker CSS -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker.min.css'>   

2. After that, create the input tag with a class name "datepicker_input" and wrap this input into the div element and define its class name “input-group”.

<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>

3. You can also create a floating label datepicker by creating the HTML structure as follows:

<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>

4. Now, load the Bootstrap and datepicker JavaScript file before closing the body tag and done.

<!-- Bootstrap 5 JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

<!-- Vanilla Datepicker JS -->
<script src='https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/datepicker-full.min.js'></script>

5. Finally, initialize the datepicker function as follows:

/* 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)
  });
}     

That’s all! I hope you have successfully integrated this vanilla JS date picker into your Bootstrap 5 project. If you have any questions or suggestions, let me know by comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.