How to use datepicker in bootstrap 4?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. How to use datepicker in bootstrap 4 with code example.

Table of contents

  • Framework and cdn link
  • Included JS 3 bootstrap
  • Div element and define its class name

This article will guide you to adding to datepicker in Bootstrap with example.

Step 1: Framework and cdn link

First of all, load the Bootstrap 4 framework CSS into the head tag of your webpage.

<!-- Bootstrap 4 CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  

Step 2: included JS 5 bootstrap

Now, load the Bootstrap JavaScript file before closing the body tag and done.

<!--Bootstrap JS included-->  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Step 3: Div element and define its class name

After that, create the break with a class name .w-100.

    <h1 align="center">Bootstrap datepicker</h1>
    <div class="container">
        <div class="row">
            <div class="col-sm-12" align="center">
                <input type="date" name="date">
            </div>

        </div>
    </div>

Example.

Let’s look at the following example to understand how it basically works:

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>Bootstrap DatePicker</title>
</head>

<body>
    <h1 align="center">Bootstrap datepicker</h1>
    <div class="container">
        <div class="row">
            <div class="col-sm-12" align="center">
                <input type="date" name="date">
            </div>

        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>

In the above code, we have used .datepicker class to datepicker in bootstrap

Check the output of the above code example.

Bootstrap, Datepicker

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Related Posts