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 Object
The HTML DOM Input Datetime Object represents an HTML input element with type="datetime". This input type was designed to allow users to enter both date and time values. However, it's important to note that the datetime input type has been deprecated in HTML5 and is not supported by most modern browsers, which treat it as a regular text input instead.
Note: Modern browsers support datetime-local instead of datetime. The datetime type was removed from the HTML specification because it lacked widespread browser support and had usability issues.
Syntax
Following is the syntax for creating an input element with datetime type −
var datetimeObject = document.createElement("input");
datetimeObject.type = "datetime";
You can also access an existing datetime input element −
var datetimeObject = document.getElementById("datetimeId");
Properties
The Input Datetime Object supports the following properties −
| Property | Description |
|---|---|
| autocomplete | Sets or returns the value of the autocomplete attribute of a datetime field |
| autofocus | Sets or returns whether the datetime field should be focused when the page loads |
| defaultValue | Sets or returns the default value of the datetime field |
| disabled | Sets or returns whether the datetime field is disabled |
| form | Returns a reference to the form that contains the datetime field |
| max | Sets or returns the value of the max attribute of the datetime field |
| min | Sets or returns the value of the min attribute of the datetime field |
| name | Sets or returns the value of the name attribute of the datetime field |
| readOnly | Sets or returns whether the datetime field is read-only |
| required | Sets or returns whether the datetime field must be filled before submitting the form |
| step | Sets or returns the value of the step attribute of the datetime field |
| type | Returns the type of form element the datetime field is |
| value | Sets or returns the value of the value attribute of the datetime field |
Methods
The Input Datetime Object supports the following methods −
| Method | Description |
|---|---|
| stepDown() | Decrements the value of the datetime field by a specified number |
| stepUp() | Increments the value of the datetime field by a specified number |
Example − Basic Datetime Input
Following example demonstrates creating and manipulating a datetime input field −
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>HTML DOM Input Datetime Object</h2>
<form>
<label for="datetime1">Date & Time:</label>
<input type="datetime" id="datetime1" name="DateSelect" value="2024-06-24T20:49Z">
<br><br>
<button type="button" onclick="showValue()">Show Value</button>
<button type="button" onclick="changeValue()">Change Value</button>
</form>
<p id="result"></p>
<script>
function showValue() {
var datetime = document.getElementById("datetime1");
document.getElementById("result").innerHTML = "Current value: " + datetime.value;
}
function changeValue() {
var datetime = document.getElementById("datetime1");
datetime.value = "2025-12-31T23:59Z";
document.getElementById("result").innerHTML = "Value changed to: " + datetime.value;
}
</script>
</body>
</html>
The output shows the datetime input field with buttons to interact with its value −
HTML DOM Input Datetime Object Date & Time: [2024-06-24T20:49Z] [Show Value] [Change Value] (Note: Most browsers will display this as a text input)
Example − Min and Max Properties
Following example demonstrates the min property of the datetime input −
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Min Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<label for="dateTime">Date & Time:</label>
<input type="datetime" id="dateTime" name="DateSelect"
value="2024-06-24T20:49Z" min="2023-12-31T23:59:59Z">
</form>
<br>
<button onclick="showMinValue()">Show Min Value</button>
<button onclick="changeMinValue()">Change Min Value</button>
<div id="divDisplay" style="margin-top: 10px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
var inputDatetime = document.getElementById("dateTime");
var divDisplay = document.getElementById("divDisplay");
// Display initial min value
divDisplay.textContent = 'Initial Min Value: ' + inputDatetime.min;
function showMinValue() {
divDisplay.textContent = 'Current Min Value: ' + inputDatetime.min;
}
function changeMinValue() {
inputDatetime.min = '2024-01-01T00:00:00Z';
divDisplay.textContent = 'Min Value changed to: ' + inputDatetime.min;
}
</script>
</body>
</html>
The output demonstrates how to get and set the minimum allowed datetime value −
Date & Time: [2024-06-24T20:49Z] [Show Min Value] [Change Min Value] Initial Min Value: 2023-12-31T23:59:59Z
Example − Step Methods
Following example shows the stepUp() and stepDown() methods −
<!DOCTYPE html>
<html>
<head>
<title>Datetime Step Methods</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<label for="stepTime">Date & Time:</label>
<input type="datetime" id="stepTime" value="2024-06-15T12:00Z" step="3600">
</form>
<br>
<button onclick="stepUpValue()">Step Up (1 hour)</button>
<button onclick="stepDownValue()">Step Down (1 hour)</button>
<button onclick="showCurrentValue()">Show Current Value</button>
<p id="stepResult" style="background-color: #e8f4ff; padding: 10px;"></p>
<script>
var stepInput = document.getElementById("stepTime");
function stepUpValue() {
try {
stepInput.stepUp(1);
document.getElementById("stepResult").innerHTML = "Stepped up. New value: " + stepInput.value;
} catch(e) {
document.getElementById("stepResult").innerHTML = "stepUp not supported in this browser";
}
}
function stepDownValue() {
try {
stepInput.stepDown(1);
document.getElementById("stepResult").innerHTML = "Stepped down. New value: " + stepInput.value;
} catch(e) {
document.getElementById("stepResult").innerHTML = "stepDown not supported in this browser";
}
}
function showCurrentValue() {
document.getElementById("stepResult").innerHTML = "Current value: " + stepInput.value;
}
</script>
</body>
</html>
The step methods increment or decrement the datetime value by the specified step amount (in seconds) −
Date & Time: [2024-06-15T12:00Z] [Step Up (1 hour)] [Step Down (1 hour)] [Show Current Value] Current value: 2024-06-15T12:00Z
Browser Compatibility
The datetime input type has limited browser support −
| Browser | Support | Notes |
|---|---|---|
| Chrome | Partial | Treats as text input |
| Firefox | No | Treats as text input |
| Safari | No | Treats as text input |
| Edge | Partial | Treats as text input |
| Opera | Partial | Some versions had support |
Recommendation: Use datetime-local instead of datetime for better browser support, or consider using separate date and time inputs along with JavaScript libraries for enhanced datetime functionality.
Conclusion
The HTML DOM Input Datetime Object represents the deprecated datetime input type, which is no longer part of the HTML5 specification. While you can still manipulate its properties and methods via JavaScript, modern web development should use datetime-local or alternative approaches for datetime input functionality.
253 Views
