DEV Community

Atanas Atanasov
Atanas Atanasov

Posted on

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" />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Resources

Top comments (0)