Open In App

How to add a date picker in form using HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:

Datepicker modal 

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>


Output:

aas



Last Updated : 10 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads