Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Date type Property
The HTML DOM Input Date type Property returns or sets the type attribute of an input element with date type. This property allows you to dynamically change the input type from a date picker to other input types like text, radio, or checkbox using JavaScript.
Syntax
Following is the syntax for returning the type property −
inputDateObject.type
Following is the syntax for setting the type property −
inputDateObject.type = stringValue
Parameters
The stringValue parameter can be any valid HTML input type. Common values include −
| stringValue | Details |
|---|---|
| date | Displays a date picker control for selecting dates |
| text | Displays a standard text input field |
| radio | Displays a radio button for single selection |
| checkbox | Displays a checkbox for multiple selections |
| Displays an email input field with validation | |
| password | Displays a password input field with hidden text |
Return Value
The property returns a string representing the current type of the input element.
Example − Getting the Input Type
Following example demonstrates how to get the type property of a date input −
<!DOCTYPE html>
<html>
<head>
<title>Get Input Date Type</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Date Type Property</h2>
<form>
<label for="dateSelect">Select Date: </label>
<input type="date" id="dateSelect" value="2024-01-15">
</form>
<br>
<button onclick="showType()">Show Input Type</button>
<div id="result" style="margin-top: 10px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
function showType() {
var inputDate = document.getElementById("dateSelect");
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = "Current input type: <b>" + inputDate.type + "</b>";
}
</script>
</body>
</html>
The output shows the current type of the input element when the button is clicked −
Current input type: date
Example − Changing Input Type Dynamically
Following example shows how to change the input type from date to text and preserve the selected value −
<!DOCTYPE html>
<html>
<head>
<title>Change Input Date Type</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Type Change</h2>
<form>
<label for="dateInput">Calendar: </label>
<input type="date" id="dateInput" value="2024-05-01">
</form>
<br>
<button onclick="changeType()">Change Type</button>
<button onclick="resetType()">Reset to Date</button>
<div id="displayInfo" style="margin-top: 10px; padding: 10px; background-color: #e8f4fd;"></div>
<script>
var inputDate = document.getElementById("dateInput");
var displayInfo = document.getElementById("displayInfo");
// Show initial type
displayInfo.innerHTML = "Current input type: <b>" + inputDate.type + "</b>";
function changeType() {
if(inputDate.type === 'date') {
var currentValue = inputDate.value;
inputDate.type = 'text';
inputDate.value = currentValue;
}
displayInfo.innerHTML = "Current input type: <b>" + inputDate.type + "</b>";
}
function resetType() {
var currentValue = inputDate.value;
inputDate.type = 'date';
inputDate.value = currentValue;
displayInfo.innerHTML = "Current input type: <b>" + inputDate.type + "</b>";
}
</script>
</body>
</html>
Initially, the input displays as a date picker. After clicking "Change Type", it becomes a text field while preserving the selected date value −
Before: Date picker showing 2024-05-01 After: Text input showing "2024-05-01" Current input type: text
Example − Converting to Different Input Types
Following example demonstrates converting a date input to various other input types −
<!DOCTYPE html>
<html>
<head>
<title>Convert Input Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Convert Date Input to Different Types</h2>
<form>
<label for="multiInput">Multi-type Input: </label>
<input type="date" id="multiInput" value="2024-03-15">
</form>
<br>
<button onclick="convertTo('text')">To Text</button>
<button onclick="convertTo('email')">To Email</button>
<button onclick="convertTo('password')">To Password</button>
<button onclick="convertTo('date')">Back to Date</button>
<div id="typeDisplay" style="margin-top: 15px; padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd;"></div>
<script>
var multiInput = document.getElementById("multiInput");
var typeDisplay = document.getElementById("typeDisplay");
// Show initial state
updateDisplay();
function convertTo(newType) {
var currentValue = multiInput.value;
multiInput.type = newType;
// Only preserve value for compatible types
if(newType === 'date' || newType === 'text') {
multiInput.value = currentValue;
} else {
multiInput.value = '';
}
updateDisplay();
}
function updateDisplay() {
typeDisplay.innerHTML = "<strong>Current Type:</strong> " + multiInput.type +
"<br><strong>Current Value:</strong> " + multiInput.value;
}
</script>
</body>
</html>
This example shows how the input appearance and behavior changes when converted to different types, and how values are preserved or cleared based on compatibility −
Current Type: date Current Value: 2024-03-15 (After clicking "To Text": shows text input with same value) (After clicking "To Email": shows email input with empty value)
Browser Compatibility
The Input Date type property is supported in all modern browsers. However, the visual appearance of date inputs may vary across browsers and operating systems. Some older browsers may fall back to text input when the date type is not supported.
Conclusion
The HTML DOM Input Date type property provides a way to dynamically change input types using JavaScript. This is useful for creating adaptive forms that can switch between different input modes while preserving user data when possible. Always consider browser compatibility and user experience when implementing dynamic type changes.
177 Views
