HTML DOM Input Date type Property


The HTML DOM Input Date type property returns/sets type of Input Date.

Syntax

Following is the syntax −

  • Returning string value
inputDateObject.type
  • Setting type to string value
inputDateObject.type = stringValue

String Values

Here, “stringValue” can be the following −

stringValueDetails
dateIt defines that input type is date
radioIt defines that input type is radio
checkboxIt defines that input type is checkbox

Example

Let us see an example of Input Date type property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>Input Date type</title>
</head>
<body>
<form>
<div>
Calendar: <input type="date" id="dateSelect" value="2017-05-01">
</div>
</form>
<button onclick="changeType()">Change Type</button>
<div id="divDisplay"></div>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputDate = document.getElementById("dateSelect");
   divDisplay.textContent = 'Input type: '+ inputDate.type;
   function changeType(){
      if(inputDate.type === 'date'){
         var currDate = inputDate.value;
         inputDate.type = 'text';
         inputDate.value = currDate;
      }
      divDisplay.textContent = 'Input type: '+ inputDate.type;
   }
</script>
</body>
</html>

Output

This will produce the following output −

Before clicking ‘Change Type’ button −

After clicking ‘Change Type’ button −

Updated on: 15-Jun-2020

52 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements