Bootstrap input calendar example

Hi 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.

Bootstrap, Input, Calendar

Bootstrap, Input, Calendar

All the best 👍