Skip to content
Related Articles

Related Articles

Improve Article

How to add a datepicker in form using HTML ?

  • Last Updated : 22 Jul, 2021

We know that a datepicker is used to select a particular date from a calendar. A datepicker is an interactive dropdown that makes it easy to choose the date from a calendar instead of typing it manually. It is generally used to save a birthdate of a user or also used in many cases. 

In this article, we will learn how to add a datepicker in form using HTML5. 

Approach: 

  • Create an HTML document that contains a form with an input field.
  • Using a type attribute in input element which is set to datetime-local“.

Syntax:

<input type="datetime-local">

HTML Code:

HTML




<!DOCTYPE html>
<html>
  
<head>
          
    <style>                
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
  
    <h2 style="color:green">GeeksforGeeks</h1>
      
    <b> How to add a datepicker in form using HTML
    </b>
      
    <br>
      
    <h4>Date Of Birth:
      <input type="datetime-local" id="Test_DatetimeLocal">
    </h4>
</body>
  
</html>                    

Output:

Datepicker modal 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

My Personal Notes arrow_drop_up
Recommended Articles
Page :