Datepicker Bootstrap 5

What is Bootstrap Datepicker?

Datepicker is a javascript component that adds the function of selecting date without the necessity of writing custom JavaScript code.

Installation

We are going to use in this article installation via CDN. All installation methods are available on our Downloads page. In order to install bootstrap 5 datepicker you need to copy the latest css and javascript libraries from jsdeliver, unpkg or cdnjs.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" />

Configuration

Basic Example
In our basic example we are going to show how to use our default bootstrap 5 configuration without any customizations.

<input id="datepicker" width="276" />
<script>
$('#datepicker').datepicker({ uiLibrary: 'bootstrap5' });
</script>

Customization
You can find all configuration options for the datepicker here. In the example below you can see how to control the format of the date in the datepicker.

<input id="datepicker" value="2022-25-07" width="312" />
<script>
$('#datepicker').datepicker({ uiLibrary: 'bootstrap5', format: 'yyyy-dd-mm' });
</script>

Localization
Our datepicker support more than 15 languages and the list is growing. You can find the full list at our locale configuration page.

<input id="datepicker" value="2022-25-07" width="312" />
<script>
$('#datepicker').datepicker({ uiLibrary: 'bootstrap5', locale: 'es-es' });
</script>

Resources

• Bootstrap 5 Datepicker example
• Gijgo Datepicker documentation page
• Bootstrap 5 documentation page