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 Datetime type Property
The HTML DOM Input Datetime type property allows you to get or set the type attribute of an input element that was initially created as a datetime input. This property is useful for dynamically changing input types or checking the current type of an input element.
Note: The datetime input type has been deprecated in HTML5. Most modern browsers treat it as a text input. For date and time inputs, use datetime-local, date, or time instead.
Syntax
Following is the syntax for returning the type value −
inputDatetimeObject.type
Following is the syntax for setting the type value −
inputDatetimeObject.type = stringValue
Return Value
The property returns a string representing the current type attribute of the input element.
Parameters
The stringValue parameter can be any valid HTML input type. Common values include −
| String Value | Description |
|---|---|
| datetime | Defines that input type is datetime (deprecated) |
| datetime-local | Defines a date and time input without timezone |
| date | Defines a date input field |
| time | Defines a time input field |
| text | Defines a text input field |
| Defines an email input field |
Example − Getting Input Type
Following example demonstrates how to get the type of a datetime input element −
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Type Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Datetime Type Property</h2>
<form>
<label for="datetimeSelect">Date of Birth: </label>
<input type="datetime" id="datetimeSelect" value="2000-09-17T19:22Z">
</form>
<br>
<button onclick="getType()">Get Input Type</button>
<button onclick="changeToText()">Change to Text</button>
<div id="result" style="margin-top: 15px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
var inputDatetime = document.getElementById("datetimeSelect");
var result = document.getElementById("result");
function getType() {
result.innerHTML = "Current input type: <b>" + inputDatetime.type + "</b>";
}
function changeToText() {
inputDatetime.type = "text";
result.innerHTML = "Input type changed to: <b>" + inputDatetime.type + "</b>";
}
</script>
</body>
</html>
The output shows the current type and allows changing it dynamically −
Input Datetime Type Property Date of Birth: [2000-09-17T19:22Z] [Get Input Type] [Change to Text] Current input type: datetime (After clicking "Change to Text": Input type changed to: text)
Example − Working with Modern Date/Time Inputs
Since datetime is deprecated, here's an example using modern alternatives −
<!DOCTYPE html>
<html>
<head>
<title>Modern Date/Time Input Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Modern Date/Time Input Types</h2>
<div style="margin-bottom: 15px;">
<label>Date: </label>
<input type="date" id="dateInput" value="2024-01-15">
<button onclick="checkType('dateInput')">Check Type</button>
</div>
<div style="margin-bottom: 15px;">
<label>Date-Time Local: </label>
<input type="datetime-local" id="datetimeLocalInput" value="2024-01-15T10:30">
<button onclick="checkType('datetimeLocalInput')">Check Type</button>
</div>
<div style="margin-bottom: 15px;">
<label>Time: </label>
<input type="time" id="timeInput" value="14:30">
<button onclick="checkType('timeInput')">Check Type</button>
</div>
<div id="output" style="margin-top: 20px; padding: 10px; background-color: #e8f5e8; border-radius: 5px;"></div>
<script>
function checkType(inputId) {
var input = document.getElementById(inputId);
var output = document.getElementById("output");
output.innerHTML = "Input ID: <b>" + inputId + "</b><br>" +
"Type: <b>" + input.type + "</b><br>" +
"Value: <b>" + input.value + "</b>";
}
</script>
</body>
</html>
This example shows how to work with modern date and time input types and check their type property −
Modern Date/Time Input Types Date: [2024-01-15] [Check Type] Date-Time Local: [2024-01-15T10:30] [Check Type] Time: [14:30] [Check Type] (Clicking any "Check Type" button displays the input's type and value)
Example − Dynamic Type Conversion
Following example demonstrates converting between different input types −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Type Conversion</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Input Type Conversion</h2>
<div style="margin-bottom: 20px;">
<label for="dynamicInput">Dynamic Input: </label>
<input type="datetime-local" id="dynamicInput" value="2024-01-15T10:30">
</div>
<div style="margin-bottom: 20px;">
<button onclick="changeType('date')">Change to Date</button>
<button onclick="changeType('time')">Change to Time</button>
<button onclick="changeType('text')">Change to Text</button>
<button onclick="changeType('datetime-local')">Reset to DateTime-Local</button>
</div>
<div id="status" style="padding: 15px; background-color: #f9f9f9; border-radius: 5px; border: 1px solid #ddd;">
Current Type: <span id="currentType">datetime-local</span>
</div>
<script>
var input = document.getElementById("dynamicInput");
var currentTypeSpan = document.getElementById("currentType");
function changeType(newType) {
var oldValue = input.value;
input.type = newType;
currentTypeSpan.textContent = input.type;
// Preserve value where possible
if (newType === 'text') {
input.value = oldValue;
}
}
</script>
</body>
</html>
This example allows you to dynamically change the input type and see how it affects the input field's appearance and behavior.
Browser Compatibility
The type property is widely supported across all modern browsers. However, the datetime input type itself has limited support:
datetime − Deprecated and not supported in modern browsers
datetime-local − Well supported in modern browsers
date and time − Excellent browser support
Conclusion
The HTML DOM Input Datetime type property provides a way to get or set the type attribute of input elements dynamically. While the original datetime input type is deprecated, the type property works with all modern input types like datetime-local, date, and time, making it useful for creating dynamic forms that adapt their input types based on user interaction or application logic.
494 Views
