Summary -

In this topic, we described about the Date Input type with detailed example.

The date input type accepts the user to choose a date from a drop-down calendar. The date value comprises the day, month and year, but not the time.

Syntax -

<input type="date" id="entry-day-time">

Example -

Below example described how to choose a date from a drop-down calendar.
<!DOCTYPE html>
<html lang="en">
 <head>
      <title>HTML5 Date Input Type</title>
       <script>
           function getValue() {
           var date = document.getElementById("mydate").value;
           alert(date);
             }
       </script>
  </head>
  <body>
      <form>
         <label for="mydate">Select Date:</label>
         <input type="date" value="2019-12-7" id="mydate">
         <button type="button" onclick="getValue();">Get Value</button>
      </form>
  </body> 
</html>

Output-

HTML5 Date Input Type
Note! The date input (i.e. type="date") is backed by the Edge, Opera, Chrome, Firefox browsers. Not backed by the Internet Explorer and Safari browsers.
Browser Support

The following browsers and corresponding versions in the table that completely supports the date type.

Input Type Chrome Edge Firefox Safari Opera
Type=”date” 20.0 12.0 57.0 Not Supported 10.1