DEV Community

Atanas Atanasov
Atanas Atanasov

Posted on

37

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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

đź‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay