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 DatetimeLocal type Property
The HTML DOM Input DatetimeLocal type property is used to get or set the type attribute of an HTML input element that handles datetime-local values. This property allows you to programmatically read the current input type or change it to a different type at runtime.
Syntax
Following is the syntax for getting the type property −
inputDatetimeLocalObject.type
Following is the syntax for setting the type property −
inputDatetimeLocalObject.type = stringValue
Return Value
The property returns a string representing the type of the input element. For datetime-local inputs, it returns "datetime-local".
Parameters
The stringValue parameter can be any valid HTML input type. Here are some common values −
| String Value | Description |
|---|---|
| datetime-local | Input field for date and time (no timezone) |
| date | Input field for date selection |
| time | Input field for time selection |
| text | Single-line text input field |
| checkbox | Checkbox input for boolean values |
Example − Getting the Type Property
Following example demonstrates how to get the type property of a datetime-local input −
<!DOCTYPE html>
<html>
<head>
<title>Get DatetimeLocal Type Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Registration</h2>
<label for="eventTime">Select Event Time:</label>
<input type="datetime-local" id="eventTime" value="2024-01-15T14:00">
<br><br>
<button onclick="checkType()">Check Input Type</button>
<p id="result"></p>
<script>
function checkType() {
var input = document.getElementById("eventTime");
var type = input.type;
document.getElementById("result").innerHTML = "Input type is: " + type;
}
</script>
</body>
</html>
The output displays the current type of the input element −
Input type is: datetime-local
Example − Setting the Type Property
Following example shows how to dynamically change the input type from datetime-local to other types −
<!DOCTYPE html>
<html>
<head>
<title>Set DatetimeLocal Type Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Input Type Change</h2>
<label for="dynamicInput">Input Field:</label>
<input type="datetime-local" id="dynamicInput" value="2024-01-15T14:00">
<br><br>
<button onclick="changeToDate()">Change to Date</button>
<button onclick="changeToText()">Change to Text</button>
<button onclick="changeToDatetimeLocal()">Change to DateTime-Local</button>
<br><br>
<p id="status">Current type: datetime-local</p>
<script>
var input = document.getElementById("dynamicInput");
var status = document.getElementById("status");
function changeToDate() {
input.type = "date";
status.innerHTML = "Current type: " + input.type;
}
function changeToText() {
input.type = "text";
status.innerHTML = "Current type: " + input.type;
}
function changeToDatetimeLocal() {
input.type = "datetime-local";
status.innerHTML = "Current type: " + input.type;
}
</script>
</body>
</html>
Clicking the buttons dynamically changes the input type and updates the display accordingly.
Example − Practical Application
Following example demonstrates a practical use case where the input type is checked to determine the appropriate action −
<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal Type Property</title>
<style>
.container {
width: 70%;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}
input, button {
padding: 8px;
margin: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
#result {
margin-top: 15px;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h2>Event Scheduler</h2>
<fieldset>
<legend>Schedule Your Event</legend>
<label for="eventDateTime">Event Date and Time: </label>
<input type="datetime-local" id="eventDateTime" value="2024-01-15T10:00">
<br><br>
<button onclick="validateEvent()">Check Event Timing</button>
<div id="result"></div>
</fieldset>
</div>
<script>
function validateEvent() {
var input = document.getElementById("eventDateTime");
var result = document.getElementById("result");
if(input.type === 'datetime-local') {
var selectedDateTime = new Date(input.value);
var now = new Date();
if(selectedDateTime > now) {
result.innerHTML = "? Event scheduled successfully for " + selectedDateTime.toLocaleString();
result.style.color = "green";
} else {
result.innerHTML = "?? Please select a future date and time";
result.style.color = "orange";
}
} else {
result.innerHTML = "? Invalid input type. Expected datetime-local input.";
result.style.color = "red";
}
}
</script>
</body>
</html>
The output validates the event timing based on the input type and selected datetime −
Event scheduled successfully for 1/15/2024, 10:00:00 AM (or appropriate validation message based on selected time)
Key Points
-
The type property is both readable and writable, allowing dynamic type changes.
-
Changing the input type may clear or modify the current value depending on compatibility.
-
The datetime-local input type provides date and time selection without timezone information.
-
Always validate the input type before performing type-specific operations.
Conclusion
The HTML DOM Input DatetimeLocal type property provides a way to programmatically access and modify the input type attribute. This property is useful for dynamic form validation, conditional logic, and creating interactive user interfaces that adapt based on input types.
173 Views
