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. 

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


  • 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“.


<input type="datetime-local">

HTML Code:


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


Datepicker modal 

My Personal Notes arrow_drop_up
Recommended Articles
Page :