HTML DOM Input Date type Property

HTMLWeb DevelopmentFront End Technology

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 −

raja
Published on 23-Jul-2019 17:12:05
Advertisements