How to add a date picker in form using HTML ?

Last Updated : 23 Jul, 2025

To add a date picker in a form using HTML, you can use the <input> element with the type attribute set to "date". A date picker is an interactive dropdown that makes it easy to choose the date from a calendar instead of typing it manually. In this article, we will learn how to add a date picker in form using HTML5.

Syntax:

<input type="datetime-local">

Additional Attributes for Date Picker:

Attribute Values	Description
Min attribute	It is used to set the minimum allowable date, ensuring users select dates after the specified minimum.
Max attribute	It is used to establish the maximum selectable date in a date picker, limiting users to choosing dates before the specified maximum.
Step attribute	It is used to define the increment value for date selection, allowing users to jump between dates based on the specified step size.

Approach:

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

Example 1: Implementation of datetime-local in an HTML document

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <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:

Example 2: Implementation of datetime-local with attributes in an HTML document

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <b>How to add a datepicker in form using HTML</b>
    <br>
    <h4>Date Of Birth:
        <input type="datetime-local" 
               id="Test_DatetimeLocal" 
               min="2015-01-01T00:00" 
               max="2025-12-31T23:59" 
               step="1">
    </h4>
</body>

</html>