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

The date picker in HTML is a useful tool that allows users to select a date from a dropdown menu, rather than typing it in manually. To create a date picker in HTML, we use the <input> element with the type attribute set to “date”. This generates an input field in the HTML document that will validate any date entered, or allow users to select a date using an interactive date picker interface.

In this article, we will discuss the overview of the DateTime tag in HTML and mainly will focus on the example of the DateTime picker tag.

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">

For selecting date and time at the same time

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

Example 1: In this example we will see how to add date and time picker with help of a example.

Output:

Example2: In this example we will see how to add date and time picker with a default value with help of another example.

Output: