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 Time type Property
The HTML DOM Input Time type property returns or sets the type attribute of an HTML input element that accepts time values. This property allows you to dynamically change or retrieve the input type using JavaScript, providing flexibility in form handling and validation.
Syntax
Following is the syntax for returning the type value −
inputTimeObject.type
Following is the syntax for setting the type value −
inputTimeObject.type = stringValue
Parameters
The stringValue parameter represents the type of input element. For time inputs, common values include −
| String Value | Description |
|---|---|
| time | Defines an input field for entering time (hours and minutes) |
| datetime-local | Defines an input field for entering date and time without timezone |
| text | Defines a standard text input field |
| checkbox | Defines a checkbox input field |
Return Value
The property returns a string representing the current type attribute value of the input element.
Getting the Input Type
Following example demonstrates how to retrieve the type of a time input element −
<!DOCTYPE html>
<html>
<head>
<title>Get Input Time Type</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Time Type Property</h2>
<form>
<label for="timeInput">Select Time: </label>
<input type="time" id="timeInput" value="14:30">
<br><br>
<button type="button" onclick="getInputType()">Get Input Type</button>
<p id="result"></p>
</form>
<script>
function getInputType() {
var timeInput = document.getElementById("timeInput");
var inputType = timeInput.type;
document.getElementById("result").innerHTML = "Input type is: " + inputType;
}
</script>
</body>
</html>
The output displays the current type of the input element −
Select Time: [14:30] [Get Input Type] Input type is: time
Setting the Input Type
Following example shows how to dynamically change the input type using the type property −
<!DOCTYPE html>
<html>
<head>
<title>Set Input Time Type</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Change Input Type Dynamically</h2>
<form>
<label for="dynamicInput">Dynamic Input: </label>
<input type="time" id="dynamicInput" value="09:00">
<br><br>
<button type="button" onclick="changeToText()">Change to Text</button>
<button type="button" onclick="changeToTime()">Change to Time</button>
<button type="button" onclick="changeToDateTime()">Change to DateTime-Local</button>
<p id="typeDisplay">Current type: time</p>
</form>
<script>
var input = document.getElementById("dynamicInput");
var display = document.getElementById("typeDisplay");
function changeToText() {
input.type = "text";
display.innerHTML = "Current type: " + input.type;
}
function changeToTime() {
input.type = "time";
display.innerHTML = "Current type: " + input.type;
}
function changeToDateTime() {
input.type = "datetime-local";
display.innerHTML = "Current type: " + input.type;
}
</script>
</body>
</html>
The buttons dynamically change the input type, demonstrating how the type property can be modified at runtime −
Dynamic Input: [time picker or text field] [Change to Text] [Change to Time] [Change to DateTime-Local] Current type: (changes based on button clicked)
Practical Example
Following example demonstrates a practical use case where the input type changes based on user preference −
<!DOCTYPE html>
<html>
<head>
<title>Time Input Type Switcher</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Time Input Type Switcher</h2>
<form>
<fieldset style="padding: 15px;">
<legend>Time Selection</legend>
<label for="timeField">Enter Time: </label>
<input type="time" id="timeField" value="12:00">
<br><br>
<label>
<input type="checkbox" id="textMode" onchange="toggleInputMode()">
Use text input instead of time picker
</label>
<br><br>
<button type="button" onclick="showInputInfo()">Show Input Info</button>
<div id="info" style="margin-top: 10px; color: #666;"></div>
</fieldset>
</form>
<script>
function toggleInputMode() {
var timeInput = document.getElementById("timeField");
var checkbox = document.getElementById("textMode");
if (checkbox.checked) {
timeInput.type = "text";
timeInput.placeholder = "Enter time as HH:MM";
} else {
timeInput.type = "time";
timeInput.placeholder = "";
}
}
function showInputInfo() {
var timeInput = document.getElementById("timeField");
var info = document.getElementById("info");
info.innerHTML = "Input type: " + timeInput.type + "<br>" +
"Input value: " + timeInput.value;
}
</script>
</body>
</html>
This example allows users to switch between time picker and text input modes, showing how the type property enables flexible user interfaces.
Conclusion
The HTML DOM Input Time type property provides a powerful way to dynamically control input field behavior in web forms. By getting or setting the type property, developers can create adaptive interfaces that respond to user preferences and application requirements, enhancing the overall user experience.
282 Views
