How to use datepicker in bootstrap3?
May 02, 2022Hi Friends đź‘‹,
Welcome To aGuideHub! ❤️
In this tutorial, we will learn how to create datepicker for Bootstrap 3 projects.
It comes with easily navigatable days, months, and years with a custom date format. You can set dd/mm/yyyy or any other suitable date format according to your needs. Similarly, you can define the custom titles and CSS styles for datepicker.
In this tutorial, you will learn how to add a simple date picker in your project. In datepicker you can easily select the date, month and year instead of typing manually. You can choose different date formats according to your need. To use the datepicker we have to add the bootstrap-datepicker.min.css and bootstrap-datepicker.min.js in our code.
How to Create Datepicker for Bootstrap 3
Step 1: Framework and datepicker’s CSS cdn
First of all, load the Bootstrap 3 framework and datepicker’s CSS into the head tag of your webpage.
<!-- Bootstrap 3 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"> Step 2: Datepicker JavaScript file
Now, load the Bootstrap and datepicker JavaScript file before closing the body tag and done.
<!--Bootstrap 3 JS included-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>Step 3: Div element and define its class name
After that, create the input tag with a class name .form-control and wrap this input into the div element and define its class name “form-group”.
<div class="container" style="max-width:800px;margin:0 auto;margin-top:50px;margin-bottom: 50px;">
<h1 style="margin-bottom:50px;font-size:28px;">Bootstrap simple datepicker example</h1>
<div class="row">
<div class="form-group">
<label>Date of Birth:</label>
<input type="text" id="example1" class="form-control" placeholder="Click to show the datepicker">
</div>
</div>
</div>step 4: Initialize the datepicker function
Finally, initialize the datepicker function as follows:
/* Bootstrap 3 JS included */
$(document).ready(function() {
$('#example1').datepicker({
autoclose: true,
format: "dd/mm/yyyy"
});
});Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap simple datepicker example</title>
<meta content='Bootstrap simple datepicker example' name='description' />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
</head>
<body>
<div class="container" style="max-width:800px;margin:0 auto;margin-top:50px;margin-bottom: 50px;">
<h1 style="margin-bottom:50px;font-size:28px;">Bootstrap simple datepicker example</h1>
<div class="row">
<div class="form-group">
<label>Date of Birth:</label>
<input type="text" id="example1" class="form-control" placeholder="Click to show the datepicker">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(function() {
$('#example1').datepicker({
autoclose: true,
format: "dd/mm/yyyy"
});
});
</script>
</body>
</html>In the above code, we have used .form-control class to datepicker in bootstrap
Check the output of the above code example.
That’s all! I hope you have successfully integrated this vanilla JS date picker into your Bootstrap 5 project.
All the best đź‘Ť
