Table of contents
1.
Introduction
2.
What is Bootstrap Datepicker?
3.
Example of Bootstrap Datepicker
3.1.
Implementation
3.2.
HTML
3.3.
Output
4.
Requirements for Bootstrap Datepicker
5.
Dependencies for Bootstrap Datepicker
6.
Data API
7.
Using Locales
7.1.
Implementation
7.2.
HTML
7.3.
Output
8.
Time Only
8.1.
Implementation
8.2.
HTML
8.3.
Output
9.
Date Only
9.1.
Implementation
9.2.
HTML
9.3.
Output
10.
No Icon
10.1.
Implementation
10.2.
HTML
10.3.
Output
11.
Enabled/Disabled Dates
11.1.
Implementation
11.2.
HTML
11.3.
Output
12.
Linked Pickers
12.1.
Implementation
12.2.
HTML
12.3.
Output
13.
View Mode
13.1.
Implementation
13.2.
HTML
13.3.
Output
14.
Troubleshooting Bootstrap Datepicker
15.
Frequently Asked Questions
15.1.
Does bootstrap have datepicker?
15.2.
How to use datepicker in bootstrap?
15.3.
Does bootstrap 5 have a datepicker?
15.4.
How to use datepicker in bootstrap 5?
16.
Conclusion
Last Updated: Dec 23, 2024
Medium

Bootstrap Datepicker

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

We must have seen some date-picking widgets commonly used on many websites. For example, while registering for a movie, we usually select a date on which we want to watch a movie through a tool known as a datepicker. The datepicker is a widget through which a user can select a specific date according to the specific period.

bootstrap datepicker

In this article, we will discuss bootstrap datepicker, its implementation, its uses, and examples to understand the concept effectively.

What is Bootstrap Datepicker?

Bootstrap datepicker is a widget through which a user can select a date that consists of a day, month, and year. It is used by a user for entering date on a website, for example, for registration, etc. The bootstrap datepicker is a plugin used for adding a function that selects dates without using complex Javascript. It is easy to use. The date icon appears on the webpage when we have included the Bootstrap plugin. The screen consisting of dates, months, and years appears by clicking on the dialog box, enabling the user to select a particular date.

Also, one might get confused if the Bootstrap datepicker is a part of the standard bootstrap CSS framework for building responsive websites. While bootstrap datepicker is not a part of the standard bootstrap framework, it's a third-party plugin that extends the bootstrap functionality by enabling a user to use a datepicker component in the website. We can even customize the datepicker component for an efficient way of interaction.

Example of Bootstrap Datepicker

Let's see an example of Bootstrap Datepicker.

Implementation

  • HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Example</title>

<!-- Include CSS files -->
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">

<!-- Include JavaScript files -->
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h3>Basic Example of Date Picker</h3>
<div class='input-group date mt-5' id='datepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datepicker').datetimepicker();
});
</script>
</div>
</div>

</body>
</html>

 

Output

output

Requirements for Bootstrap Datepicker

The bootstrap datepicker requires the dropdown component (dropdown. less) for some particular styles and bootstrap sprites (sprites. less and associated images) for using arrows.

The bootstrap datepicker plugin requires the dropdown component of the bootstrap. This is defined in the ‘dropdown. less’ file. While a bootstrap sprite refers to the graphical elements and images for displaying the icons like arrows through which we can select the next month/year or prev month/year. By using sprites, we can enhance the user interface. Therefore ‘sprites.less’ file should be present in our directory.

Dependencies for Bootstrap Datepicker

We can import the sprites file in the CSS file by using @import “path/to/sprites.less”;

Also, for using bootstrap datepicker, these are the following requirements.

  • The bootstrap version should be equal to or above 2.0.4
     
  • The jquery version should be equal to or above 1.7.1

Data API

API refers to the mechanisms which help in the communication of two software components  by using some set of definitions and protocols. They bring about applications together to perform a function by sharing certain data and by executing pre-defined processes.

Data API (application program interface) lets us initialize the bootstrap datepicker. There is no need to write a custom javascript code. For example, we can use the data attribute in our HTML tag for initializing the date pickers. 

<input data-provide=”datepicker”>

Therefore, through the above statement, we have provided the data-provide=”datepicker” attribute for initializing the datepicker in the input field.

So by using these data APIs, there is no need to write complex javascript code explicitly, just like how we use bootstrap classes.

Using Locales

Using locales with Bootstrap Datepicker allows you to display the datepicker in different languages and format dates according to local conventions. You can achieve this by including the appropriate locale file and configuring the datepicker to use the desired locale. Here's an example of how to use Bootstrap Datepicker with locales:

Implementation

  • HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Example</title>

<!-- Include CSS files -->
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">

<!-- Include JavaScript files -->
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js" integrity="sha512-42PE0rd+wZ2hNXftlM78BSehIGzezNeQuzihiBCvUEB3CVxHvsShF86wBWwQORNxNINlBPuq7rG4WWhNiTVHFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h3>Basic Example of Date Picker</h3>
<div class='input-group date' id='datepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datepicker').datetimepicker({
format: 'MM/DD/YYYY',
locale: 'fr'
});
});
</script>
</div>
</div>

</body>
</html>

 

Output

output

Time Only

If you want to use Bootstrap Datetimepicker to select only the time (without the date), you can configure it to show the time picker interface and hide the date picker interface. Here's how you can do it:

Implementation

  • HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Example</title>

<!-- Include CSS files -->
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">

<!-- Include JavaScript files -->
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js" integrity="sha512-42PE0rd+wZ2hNXftlM78BSehIGzezNeQuzihiBCvUEB3CVxHvsShF86wBWwQORNxNINlBPuq7rG4WWhNiTVHFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h3>Basic Example of Date Picker</h3>
<div class='input-group date' id='datepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datepicker').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>

</body>
</html>

 

Output

output

Date Only

If you want to use Bootstrap Datetimepicker to select only the date (without the time), you can configure it to show the date picker interface and hide the time picker interface. Here's how you can do it:

Implementation

  • HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Example</title>

<!-- Include CSS files -->
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">

<!-- Include JavaScript files -->
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js" integrity="sha512-42PE0rd+wZ2hNXftlM78BSehIGzezNeQuzihiBCvUEB3CVxHvsShF86wBWwQORNxNINlBPuq7rG4WWhNiTVHFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h3>Basic Example of Date Picker</h3>
<div class='input-group date' id='datepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datepicker').datetimepicker({
format: 'MM/DD/YYYY'
});
});
</script>
</div>
</div>

</body>
</html>

 

Output

output

No Icon

If you want to use Bootstrap Datetimepicker without the icon for the date picker, you can simply remove the icon element from the HTML and update the layout accordingly. Here's an example:

Implementation

  • HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Example</title>

<!-- Include CSS files -->
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">

<!-- Include JavaScript files -->
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js" integrity="sha512-42PE0rd+wZ2hNXftlM78BSehIGzezNeQuzihiBCvUEB3CVxHvsShF86wBWwQORNxNINlBPuq7rG4WWhNiTVHFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h3>Basic Example of Date Picker</h3>
<div class='input-group date'>
<input type='text' class="form-control" id='datepicker'/>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datepicker').datetimepicker();
});
</script>
</div>
</div>

</body>
</html>

 

Output

output

Enabled/Disabled Dates

You can enable or disable specific dates in the Bootstrap Datetimepicker by using the enabledDates and disabledDates options. These options allow you to specify an array of dates that should be enabled or disabled. Here's an example:

Implementation

  • HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Example</title>

<!-- Include CSS files -->
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">

<!-- Include JavaScript files -->
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js" integrity="sha512-42PE0rd+wZ2hNXftlM78BSehIGzezNeQuzihiBCvUEB3CVxHvsShF86wBWwQORNxNINlBPuq7rG4WWhNiTVHFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h3>Basic Example of Date Picker</h3>
<div class='input-group date' id='datepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datepicker').datetimepicker({
defaultDate: "9/13/2023",
disabledDates: [
"9/12/2023",
"9/11/2023"
]
});
});
</script>
</div>
</div>

</body>
</html>

Output

Linked Pickers

Linked pickers allow you to create a relationship between two date or time pickers where the selection in one picker affects the available options in the other picker. For example, you can create two date pickers where the second picker depends on the selection made in the first picker (e.g., choosing a start date and an end date for an event).

To create linked pickers using Bootstrap Datetimepicker, you can use the dp.change event to update the options of the second picker when a date is selected in the first picker. Here's an example of linked date pickers:

Implementation

  • HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Example</title>

<!-- Include CSS files -->
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">

<!-- Include JavaScript files -->
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js" integrity="sha512-42PE0rd+wZ2hNXftlM78BSehIGzezNeQuzihiBCvUEB3CVxHvsShF86wBWwQORNxNINlBPuq7rG4WWhNiTVHFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h3>Basic Example of Date Picker</h3>
<div class='input-group date' id='datepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</span>
</div>
<div class='input-group date' id='datepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datepicker1').datetimepicker();
$('#datepicker2').datetimepicker({
useCurrent: false
});
$("#datepicker1").on("dp.change", function (e) {
$('#datepicker2').data("DateTimePicker").minDate(e.date);
});
$("#datepicker2").on("dp.change", function (e) {
$('#datepicker1').data("DateTimePicker").maxDate(e.date);
});
});
</script>
</div>
</div>

</body>
</html>

 

Output

OUTPUT

View Mode

The "view mode" in Bootstrap Datetimepicker allows you to set the initial view of the calendar when the picker is displayed. You can configure it to display the calendar in different views, such as months, years, or decades. Here's how to set the view mode in Bootstrap Datetimepicker:

Implementation

  • HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Example</title>

<!-- Include CSS files -->
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">

<!-- Include JavaScript files -->
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js" integrity="sha512-42PE0rd+wZ2hNXftlM78BSehIGzezNeQuzihiBCvUEB3CVxHvsShF86wBWwQORNxNINlBPuq7rG4WWhNiTVHFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h3>Basic Example of Date Picker</h3>
<div class='input-group date' id='datepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datepicker').datetimepicker({
viewMode: 'years',
format: 'MM/YYYY'
});
});
</script>
</div>
</div>

</body>
</html>

Output

OUTPUT

Troubleshooting Bootstrap Datepicker

While implementing Bootstrap datepicker, one might face certain issues. Below are some of the troubleshooting techniques.

  • As the first step, we must include all the necessary files for implementing bootstrap datepicker. Ensure you have included all the files, such as jQuery and Bootstrap.
     
  • If you cannot see the implementation of bootstrap datepicker, you might have selected the wrong HTML element. For example, if you have given a class name as datepicker and you have actually written #datepicker instead of .datepicker, it will result in an error.
     
  • For tracking the execution flow, you can try console logging by using ‘console.log’ and inspecting the browser’s console. This is a common way o identifying bugs and errors.
     
  • Ensure to include correct versions of jQuery and Bootstrap required for implementing bootstrap datepicker.
     
  • One can face errors as a conflict may arise between the bootstrap datepicker and other plugins used. To solve this issue, try to remove the existing plugins. This may help in identifying the issue. Another option is to check for compatibility issues by reviewing the documentation.

Frequently Asked Questions

Does bootstrap have datepicker?

Yes, Bootstrap itself does not have a built-in datepicker component. However, you can easily add a datepicker to your Bootstrap-based project using third-party libraries like Bootstrap Datepicker or Bootstrap Datetimepicker.

How to use datepicker in bootstrap?

To use a datepicker in Bootstrap, include a datepicker library (e.g., Bootstrap Datepicker) and initialize it on an HTML input field. This allows users to select dates easily.

Does bootstrap 5 have a datepicker?

Bootstrap 5 doesn't include a built-in datepicker. Developers typically use third-party datepicker libraries with Bootstrap 5 to add date selection functionality to their web applications.

How to use datepicker in bootstrap 5?

Bootstrap 5 doesn't have a native datepicker. To add one, use a third-party library like "datepicker.js" or "tempusdominus-bootstrap-4" and follow their documentation for integration into your Bootstrap 5 project.

Conclusion

In this article, we discussed, in brief, the Bootstrap Datepicker, its dependencies and requirements, a basic example, and different customizations like Only Date, only Time, No icon, Linked pickers, view mode, etc. You can try out the code by running it yourself.
Check this out - Bootstrap Accordion

Refer to our Guided Path to upskill yourself in DSACompetitive ProgrammingJavaScriptSystem Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio!

But suppose you have just started your learning process and are looking for questions from tech giants like Amazon, Microsoft, Uber, etc. For placement preparations, you must look at the problemsinterview experiences, and interview bundles.

Live masterclass