Bootstrap input calendar example
June 22, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
To make input calendar, put the .datepicker class to create an input calendar in bootstrap for example.
Today, I am going to show you. how to create input calendar in bootstrap with code example.
Table of contents
- Includes bootstrap view
- Includes bootstrap library
- Define its class name
- Add JavaScript in
<script>tag
This article will guide you to adding input calendar in Bootstrap 4 with example.
Step 1: Includes bootstrap view
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Step : Includes bootstrap library
First of all, load the Bootstrap 4 framework CSS into the head tag of your webpage.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>Step 3: Define its class name
After that, create the input borders with a class name <input type="text">.
<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 input calendar (datepicker) example</h1>
<div class="row">
<div class="form-group">
<label>Calendar:</label>
<input type="text" id="example1" class="form-control" placeholder="Click to show the datepicker">
</div>
</div>
</div>Step 4: Add JavaScript in <script> tag
Add the following JavaScript in <script> tag after the <body> tag to specify show the calendar in browser.
$(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 input calendar (datepicker) example</h1>
<div class="row">
<div class="form-group">
<label>Calendar:</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>Check the output of the above code example.
All the best 👍
