Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

HTML DOM Input Datetime value Property

HTML Web Development Front End Technology

The HTML DOM Input Datetime value property allows you to get or set the value of a datetime input field. This property returns the current value as a string in ISO 8601 format or sets a new datetime value programmatically.

Syntax

Following is the syntax for getting the datetime value −

inputDatetimeObject.value

Following is the syntax for setting the datetime value −

inputDatetimeObject.value = "YYYY-MM-DDTHH:MM:SSZ"

The datetime value must be in ISO 8601 format: YYYY-MM-DDTHH:MM:SSZ where T separates date and time, and Z indicates UTC timezone.

Return Value

The property returns a string representing the current value of the datetime input field. If no value is set, it returns an empty string.

Getting Datetime Value

Example

Following example demonstrates how to retrieve the current value of a datetime input −

<!DOCTYPE html>
<html>
<head>
   <title>Get Datetime Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h2>Get Datetime Input Value</h2>
   <form>
      <label for="datetime1">Select Date & Time:</label>
      <input type="datetime" id="datetime1" value="2024-12-25T10:30:00Z">
   </form>
   <button onclick="getValue()">Get Value</button>
   <p id="result"></p>
   
   <script>
      function getValue() {
         var datetimeInput = document.getElementById("datetime1");
         var currentValue = datetimeInput.value;
         document.getElementById("result").innerHTML = "Current value: " + currentValue;
      }
   </script>
</body>
</html>

The output displays the current datetime value when the button is clicked −

Current value: 2024-12-25T10:30:00Z

Setting Datetime Value

Example

Following example shows how to set a new value for the datetime input −

<!DOCTYPE html>
<html>
<head>
   <title>Set Datetime Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h2>Set Datetime Input Value</h2>
   <form>
      <label for="datetime2">Date & Time:</label>
      <input type="datetime" id="datetime2" value="2023-01-01T12:00:00Z">
   </form>
   <button onclick="setNewValue()">Set New Value</button>
   <button onclick="resetValue()">Reset to Original</button>
   <p id="status"></p>
   
   <script>
      var originalValue = "2023-01-01T12:00:00Z";
      
      function setNewValue() {
         var datetimeInput = document.getElementById("datetime2");
         datetimeInput.value = "2024-06-15T14:45:30Z";
         document.getElementById("status").innerHTML = "Value updated to: " + datetimeInput.value;
      }
      
      function resetValue() {
         var datetimeInput = document.getElementById("datetime2");
         datetimeInput.value = originalValue;
         document.getElementById("status").innerHTML = "Value reset to: " + datetimeInput.value;
      }
   </script>
</body>
</html>

The datetime input value changes when either button is clicked −

Value updated to: 2024-06-15T14:45:30Z
(or)
Value reset to: 2023-01-01T12:00:00Z

Complete Example with Value Change Detection

Example

Following example demonstrates getting and setting datetime values with change detection −

<!DOCTYPE html>
<html>
<head>
   <title>Datetime Value Property Demo</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h2>Input Datetime Value Property</h2>
   <form>
      <div style="margin: 10px 0;">
         <label for="datetimeSelect">Date & Time: </label>
         <input type="datetime" id="datetimeSelect" value="2015-08-22T16:24:00Z">
      </div>
   </form>
   <button onclick="changeValue()">Change Value</button>
   <button onclick="getCurrentValue()">Show Current Value</button>
   <div id="divDisplay" style="margin: 10px 0; padding: 10px; background-color: #f0f8ff; border: 1px solid #ccc;"></div>
   
   <script>
      var divDisplay = document.getElementById("divDisplay");
      var inputDatetime = document.getElementById("datetimeSelect");
      divDisplay.textContent = 'Initial value: ' + inputDatetime.value;
      
      function changeValue() {
         var currDatetime = inputDatetime.value;
         inputDatetime.value = '2017-03-17T16:24:00Z';
         divDisplay.textContent = 'Updated value from: ' + currDatetime + ' to: ' + inputDatetime.value;
      }
      
      function getCurrentValue() {
         divDisplay.textContent = 'Current value: ' + inputDatetime.value;
      }
   </script>
</body>
</html>

The output shows the initial value and updates when buttons are clicked −

Initial value: 2015-08-22T16:24:00Z
(After clicking "Change Value")
Updated value from: 2015-08-22T16:24:00Z to: 2017-03-17T16:24:00Z

Browser Compatibility

The input type="datetime" has limited browser support. Modern browsers have deprecated it in favor of datetime-local. For better compatibility, consider using input type="datetime-local" which provides similar functionality with wider browser support.

Key Points

  • The value must be in ISO 8601 format: YYYY-MM-DDTHH:MM:SSZ

  • Returns an empty string if no value is set

  • The datetime input type is deprecated; use datetime-local for better support

  • Changes to the value property immediately reflect in the input field

Conclusion

The HTML DOM Input Datetime value property provides a straightforward way to get and set datetime values programmatically. While the datetime input type has limited support, understanding this property is useful for working with datetime inputs and can be applied to similar input types like datetime-local.

Updated on: 2026-03-16T21:38:53+05:30

210 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements