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 value Property
The HTML DOM Input DatetimeLocal value property is used to get or set the value of a datetime-local input field. This property returns a string representing the current value, or allows you to programmatically change the input's value using JavaScript.
The datetime-local input type allows users to select both a date and time without timezone information. The value is always stored in the format YYYY-MM-DDTHH:MM, where T separates the date and time components.
Syntax
Following is the syntax for getting the value −
inputDatetimeLocalObject.value
Following is the syntax for setting the value −
inputDatetimeLocalObject.value = 'YYYY-MM-DDTHH:MM'
Parameters
The value property accepts a string in the format YYYY-MM-DDTHH:MM −
YYYY − Four-digit year (e.g., 2024)
MM − Two-digit month (01-12)
DD − Two-digit day (01-31)
T − Literal character separating date and time
HH − Two-digit hour in 24-hour format (00-23)
MM − Two-digit minute (00-59)
Return Value
The value property returns a string representing the current datetime value of the input field. If no value is set, it returns an empty string.
Example − Getting DatetimeLocal Value
Following example demonstrates how to retrieve the value from a datetime-local input −
<!DOCTYPE html>
<html>
<head>
<title>Get DatetimeLocal Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select Meeting DateTime</h2>
<label for="meetingTime">Meeting Schedule: </label>
<input type="datetime-local" id="meetingTime" value="2024-12-25T14:30">
<br><br>
<button onclick="showValue()">Show Selected DateTime</button>
<p id="result"></p>
<script>
function showValue() {
var datetimeInput = document.getElementById("meetingTime");
var selectedValue = datetimeInput.value;
document.getElementById("result").textContent = "Selected: " + selectedValue;
}
</script>
</body>
</html>
The output displays the selected datetime value −
Meeting Schedule: [Dec 25, 2024, 2:30 PM] [Show Selected DateTime] Selected: 2024-12-25T14:30
Example − Setting DatetimeLocal Value
Following example shows how to programmatically set the datetime-local value −
<!DOCTYPE html>
<html>
<head>
<title>Set DatetimeLocal Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Appointment Scheduler</h2>
<label for="appointment">Appointment DateTime: </label>
<input type="datetime-local" id="appointment">
<br><br>
<button onclick="setMorning()">Set Morning (9:00 AM)</button>
<button onclick="setAfternoon()">Set Afternoon (2:30 PM)</button>
<button onclick="clearValue()">Clear</button>
<p id="status"></p>
<script>
function setMorning() {
document.getElementById("appointment").value = "2024-12-30T09:00";
document.getElementById("status").textContent = "Morning appointment set.";
}
function setAfternoon() {
document.getElementById("appointment").value = "2024-12-30T14:30";
document.getElementById("status").textContent = "Afternoon appointment set.";
}
function clearValue() {
document.getElementById("appointment").value = "";
document.getElementById("status").textContent = "Appointment cleared.";
}
</script>
</body>
</html>
Clicking the buttons updates the datetime-local input with predefined values or clears it entirely.
Example − Dynamic DateTime Update
Following example demonstrates updating datetime values based on user interaction −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic DateTime Update</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<fieldset style="max-width: 400px;">
<legend>Examination Schedule</legend>
<label for="examDateTime">Examination Date & Time: </label>
<input type="datetime-local" id="examDateTime" value="2024-10-29T09:30">
<br><br>
<button onclick="postponeExam()">Postpone by 1 Week</button>
<div id="examInfo" style="margin-top: 15px; color: #333;"></div>
</fieldset>
<script>
function postponeExam() {
var examInput = document.getElementById("examDateTime");
var currentValue = new Date(examInput.value);
// Add 7 days (1 week)
currentValue.setDate(currentValue.getDate() + 7);
// Format back to datetime-local format
var year = currentValue.getFullYear();
var month = String(currentValue.getMonth() + 1).padStart(2, '0');
var day = String(currentValue.getDate()).padStart(2, '0');
var hours = String(currentValue.getHours()).padStart(2, '0');
var minutes = String(currentValue.getMinutes()).padStart(2, '0');
var newDateTime = year + '-' + month + '-' + day + 'T' + hours + ':' + minutes;
examInput.value = newDateTime;
document.getElementById("examInfo").textContent =
"Exam postponed to: " + currentValue.toLocaleDateString() + " at " +
currentValue.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
}
</script>
</body>
</html>
The output shows the original date and allows postponing by one week −
Examination Date & Time: [Oct 29, 2024, 9:30 AM] [Postpone by 1 Week] (After clicking: Exam postponed to: 11/5/2024 at 09:30)
Browser Compatibility
The datetime-local input type is supported in modern browsers including Chrome, Firefox, Safari, and Edge. Older browsers may display a text input instead of the datetime picker interface.
Key Points
The value must be in
YYYY-MM-DDTHH:MMformat for proper functionality.Invalid format values are ignored and the input remains unchanged.
The property returns an empty string if no value is set.
Datetime-local inputs do not include timezone information.
You can use JavaScript Date objects to manipulate values before setting them.
Conclusion
The HTML DOM Input DatetimeLocal value property provides a straightforward way to get and set datetime values in datetime-local input fields. It accepts and returns strings in the standard YYYY-MM-DDTHH:MM format, making it easy to work with dates and times programmatically using JavaScript.
180 Views
