How to setting up Datepicker in Bootstrap ?
Last Updated :
22 Nov, 2022
In this article, we will see how to use various options for Bootstrap Datepicker to provide different datepicker features to users. We will set up a datepicker with four options. For setting up bootstrap datepicker, we will be using HTML, CSS, jQuery, and Bootstrap.
Setting bootstrap datepicker is an easy task as we are using datepicker instantiation and adding options to it. First of all, let’s understand what is Datepicker. Bootstrap Datepicker is an open-source repository that provides an API to integrate a date time picker into the front end of the website. Most of the forms built today use datepicker for date input rather than taking manual input. Datepicker is an input utility that provides users with a calendar view to select a date. Bootstrap datepicker has multiple options for setting up datepicker.
Datepicker In Forms
Syntax:
$("#datepickerID").datepicker({
OPTIONS
}).datepicker('update', new Date());
Approach:
- First, create an HTML file with a page body, input field, and other elements. Create separate javascript and CSS files, if required, and include them in the HTML file.
- Add JAVASCRIPT for instantiating a datepicker. Add different options for getting different functions in datepicker.
- Follow the below code format to link some external CSS to your code inside the <head> tag by following this order.
- Add the following CDN links, in order to enable the use of the datepicker
Bootstrap 3.0+ (Link CSS And JS):
<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css” rel=”stylesheet” type=”text/css” />
<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js” integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”></script>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js” integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anonymous”></script>
UX Solutions Datepicker 1.2+
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css”>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js”></script>
- Add the various available classes in Bootstrap Datepicker, to an input field as required.
- We can add datepicker options at the time when datepicker instance is created.
- It is then necessary to initialize the date picker to the input field so that when the user clicks that input field, the pop-up calendar will appear and they can then pick the date from that prompt.
Example 1: In this example, we have set up bootstrap datepicker with autoclose and todayhighlight option. An autoclose option automatically closes the datepicker after the selection of the date. The todayhighlight option highlights today’s date.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href=
rel="stylesheet" type="text/css" />
<link rel="stylesheet" href=
<title>Bootstrap Datepicker</title>
<style>
label{margin-left: 20px;}
#datepicker{width:180px;}
#datepicker > span:hover{cursor: pointer;}
</style>
</head>
<body>
<div class="container">
<h1 class="text-success font-weight-bold">
GeeksforGeeks
</h1>
<h3>
setting up bootstrap datepicker
</h3>
<label>Select Date: </label>
<div id="datepicker"
class="input-group date"
data-date-format="mm-dd-yyyy">
<input class="form-control"
type="text" readonly />
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
integrity=
"sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous">
</script>
<script>
$(function () {
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: true,
}).datepicker('update', new Date());
});
</script>
<script src=
integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
<script src=
</script>
</body>
</html>
|
Output: From the output, after running the project we can see the following output in the browser.
Datepicker with autoclose and todayhighlight options
Example 2: In this example, we will add todayBtn option that will add the today button at bottom of datepicker which on click selects today’s date. Also, we will add a title option that shows the datepicker title. We will use the above example by updating the code, where the script has both options added to the function.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href=
rel="stylesheet"
type="text/css" />
<link rel="stylesheet"
href=
<title>Bootstrap Datepicker</title>
<style>
label{margin-left: 20px;}
#datepicker{width:180px;}
#datepicker > span:hover{cursor: pointer;}
</style>
</head>
<body>
<div class="container">
<h1 class="text-success font-weight-bold">
GeeksforGeeks
</h1>
<h3>
setting up bootstrap datepicker
</h3>
<label>Select Date: </label>
<div id="datepicker"
class="input-group date"
data-date-format="mm-dd-yyyy">
<input class="form-control"
type="text" readonly />
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
<script src=
integrity=
"sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous">
</script>
<script>
$(function () {
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: true,
todayBtn : "linked",
title : "Geeksforgeeks datepicker"
}).datepicker('update', new Date());
});
</script>
<script src=
integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
<script src=
</script>
</body>
</html>
|
Output:
Datepicker with todayBtn and title option
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...