Skip to content
Related Articles
Open in App
Not now

Related Articles

How to add date and time picker using only one tag in HTML ?

Improve Article
Save Article
  • Last Updated : 07 Jan, 2022
Improve Article
Save Article

In this article, we will discuss the overview of the datetime tag in HTML and mainly will focus on the example of datetime picker tag. We can add date and time picker in only one tag without using the two different tags. Let’s discuss it one by one. 

Syntax:

For selecting a date we use the date tag in HTML.

Date of Birth: <input type="date">

And for selecting a time we use the time tag in HTML. 

Enter Time: <input type="time">

But if we want to take the date and time at the same time then these two separate lines of code will take more time than the datetime-local tag. So to reduce the time required for coding we can use only one line of code. Let’s see the syntax and example for it:

Date with Time: <input type="datetime-local">

When we click on the input box of date and time it will show a calendar and time, and it will show the current date, month, and time by default, then we have to select the date and time or we can also type it in the input box.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
</head>
  
<body>
    <h2>Welcome To GFG</h2>
    Select date and time: 
          <input type="datetime-local" />
</body>
  
</html>


Output:

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!