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 name Property
The HTML DOM Input Datetime name property sets or returns the value of the name attribute of an input datetime element. The name attribute is used to reference form data after a form is submitted and identifies the input field in JavaScript.
Note: The HTML5 input type="datetime" has been deprecated. Modern browsers use datetime-local instead, but this property works similarly for both types.
Syntax
Following is the syntax for returning the name value −
inputDatetimeObject.name
Following is the syntax for setting the name value −
inputDatetimeObject.name = "string"
Return Value
The property returns a string that represents the value of the name attribute of the input datetime element. If no name attribute is set, it returns an empty string.
Example − Getting the Name Property
Following example demonstrates how to get the name property of an input datetime element −
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Get Datetime Name Property</h2>
<form>
<label for="birthday">Birthday: </label>
<input type="datetime-local" id="birthday" name="user_birthday" value="2023-05-15T14:30">
</form>
<br>
<button onclick="getName()">Get Name Property</button>
<p id="result"></p>
<script>
function getName() {
var datetime = document.getElementById("birthday");
var result = document.getElementById("result");
result.textContent = "Name property: " + datetime.name;
}
</script>
</body>
</html>
The output shows the name attribute value when the button is clicked −
Name property: user_birthday
Example − Setting the Name Property
Following example shows how to change the name property dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Change Datetime Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Change Datetime Name Property</h2>
<form>
<label for="eventTime">Event Time: </label>
<input type="datetime-local" id="eventTime" name="meeting_time" value="2023-12-25T09:00">
</form>
<br>
<button onclick="changeName()">Change Name to "appointment_time"</button>
<button onclick="showCurrentName()">Show Current Name</button>
<p id="display"></p>
<script>
var datetimeInput = document.getElementById("eventTime");
var display = document.getElementById("display");
// Show initial name
display.textContent = "Current name: " + datetimeInput.name;
function changeName() {
datetimeInput.name = "appointment_time";
display.textContent = "Name changed to: " + datetimeInput.name;
}
function showCurrentName() {
display.textContent = "Current name: " + datetimeInput.name;
}
</script>
</body>
</html>
The display shows the current name and updates when the name is changed −
Initial: Current name: meeting_time After clicking "Change Name": Name changed to: appointment_time
Example − Form Submission with Name Property
Following example demonstrates how the name property is used when submitting form data −
<!DOCTYPE html>
<html>
<head>
<title>Name Property in Form Submission</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Form Submission Example</h2>
<form id="datetimeForm">
<label for="startTime">Start Time: </label>
<input type="datetime-local" id="startTime" name="start_datetime" value="2023-06-01T10:00">
<br><br>
<label for="endTime">End Time: </label>
<input type="datetime-local" id="endTime" name="end_datetime" value="2023-06-01T17:00">
<br><br>
<button type="button" onclick="showFormData()">Show Form Data</button>
</form>
<div id="formOutput"></div>
<script>
function showFormData() {
var form = document.getElementById("datetimeForm");
var output = document.getElementById("formOutput");
var formData = new FormData(form);
var result = "<h3>Form Data (name: value pairs):</h3>";
for (let [name, value] of formData) {
result += "<p><strong>" + name + ":</strong> " + value + "</p>";
}
output.innerHTML = result;
}
</script>
</body>
</html>
This shows how the name attributes become the keys in the submitted form data −
Form Data (name: value pairs): start_datetime: 2023-06-01T10:00 end_datetime: 2023-06-01T17:00
Browser Compatibility
The name property is supported in all modern browsers. However, since input type="datetime" is deprecated, it is recommended to use datetime-local for better browser support and standards compliance.
Conclusion
The HTML DOM Input Datetime name property allows you to get or set the name attribute of datetime input elements. This property is essential for form data submission and JavaScript form manipulation. Always use meaningful names that clearly identify the purpose of the datetime input field.
158 Views
