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
Selected Reading
HTML DOM Input DatetimeLocal Object
The HTML DOM Input DatetimeLocal Object represents an HTML input element with type="datetime-local". This input type allows users to select both a date and time without timezone information, providing a convenient interface for date-time selection in web forms.
The datetime-local input displays a date picker combined with a time picker, making it easier for users to enter precise date and time values. The selected value is stored in the format YYYY-MM-DDTHH:MM.
Syntax
Following is the syntax for creating an input element with type datetime-local −
<input type="datetime-local" id="myDatetime" name="appointment">
To create a datetime-local input programmatically using JavaScript −
var datetimeLocalObject = document.createElement("input");
datetimeLocalObject.type = "datetime-local";
To access an existing datetime-local input element −
var x = document.getElementById("myDatetime");
Properties
The datetime-local input object supports the following properties −
| Property | Description |
|---|---|
| autocomplete | Sets or returns the autocomplete attribute value of the datetime-local field |
| autofocus | Sets or returns whether the datetime-local field should automatically get focus when the page loads |
| defaultValue | Sets or returns the default value of the datetime-local field |
| disabled | Sets or returns whether the datetime-local field is disabled |
| form | Returns a reference to the form that contains the datetime-local field |
| max | Sets or returns the maximum allowed date and time for the datetime-local field |
| min | Sets or returns the minimum allowed date and time for the datetime-local field |
| name | Sets or returns the name attribute value of the datetime-local field |
| readOnly | Sets or returns whether the datetime-local field is read-only |
| required | Sets or returns whether the datetime-local field must be filled before submitting the form |
| step | Sets or returns the step attribute value of the datetime-local field |
| type | Returns the type of form element (datetime-local) |
| value | Sets or returns the value attribute of the datetime-local field |
Methods
The datetime-local input object supports the following methods −
| Method | Description |
|---|---|
| stepDown() | Decreases the datetime-local field value by a specified number of intervals |
| stepUp() | Increases the datetime-local field value by a specified number of intervals |
Creating a DateTime-Local Input
Example
Following example demonstrates how to create a datetime-local input element dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Create DateTime-Local Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Create DateTime-Local Input</h2>
<button onclick="createInput()">Create DateTime-Local Input</button>
<div id="container"></div>
<script>
function createInput() {
var input = document.createElement("input");
input.type = "datetime-local";
input.id = "myDatetime";
input.name = "appointment";
input.value = "2024-12-25T14:30";
var label = document.createElement("label");
label.innerHTML = "Select Date and Time: ";
label.setAttribute("for", "myDatetime");
var container = document.getElementById("container");
container.innerHTML = "";
container.appendChild(label);
container.appendChild(input);
}
</script>
</body>
</html>
The output shows a button that creates a datetime-local input when clicked −
Create DateTime-Local Input [Button] (After clicking: Select Date and Time: [2024-12-25T14:30 input field])
Accessing DateTime-Local Input Properties
Example
Following example shows how to access and modify properties of a datetime-local input −
<!DOCTYPE html>
<html>
<head>
<title>DateTime-Local Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>DateTime-Local Input Properties</h2>
<label for="datetime">Appointment: </label>
<input type="datetime-local" id="datetime" name="appointment"
min="2024-01-01T09:00" max="2024-12-31T17:00"
value="2024-06-15T10:30" required>
<br><br>
<button onclick="showProperties()">Show Properties</button>
<button onclick="changeValue()">Change Value</button>
<div id="output"></div>
<script>
function showProperties() {
var input = document.getElementById("datetime");
var output = document.getElementById("output");
output.innerHTML = "<h3>Properties:</h3>" +
"<p>Type: " + input.type + "</p>" +
"<p>Value: " + input.value + "</p>" +
"<p>Min: " + input.min + "</p>" +
"<p>Max: " + input.max + "</p>" +
"<p>Required: " + input.required + "</p>";
}
function changeValue() {
var input = document.getElementById("datetime");
input.value = "2024-08-20T15:45";
document.getElementById("output").innerHTML = "<p>Value changed to: " + input.value + "</p>";
}
</script>
</body>
</html>
The example displays a datetime-local input with min/max constraints and buttons to demonstrate property access −
Appointment: [2024-06-15T10:30 datetime picker] [Show Properties] [Change Value] (After clicking Show Properties:) Properties: Type: datetime-local Value: 2024-06-15T10:30 Min: 2024-01-01T09:00 Max: 2024-12-31T17:00 Required: true
Using stepUp() and stepDown() Methods
Example
Following example demonstrates the stepUp() and stepDown() methods −
<!DOCTYPE html>
<html>
<head>
<title>DateTime-Local Step Methods</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>DateTime-Local Step Methods</h2>
<label for="meetingTime">Meeting Time: </label>
<input type="datetime-local" id="meetingTime" value="2024-06-15T14:00" step="1800">
<br><br>
<button onclick="stepUp()">Step Up (30 min)</button>
<button onclick="stepDown()">Step Down (30 min)</button>
<button onclick="getCurrentValue()">Get Current Value</button>
<div id="result"></div>
<script>
function stepUp() {
var input = document.getElementById("meetingTime");
input.stepUp();
document.getElementById("result").innerHTML = "<p>After Step Up: " + input.value + "</p>";
}
function stepDown() {
var input = document.getElementById("meetingTime");
input.stepDown();
document.getElementById("result").innerHTML = "<p>After Step Down: " + input.value + "</p>";
}
function getCurrentValue() {
var input = document.getElementById("meetingTime");
document.getElementById("result").innerHTML = "<p>Current Value: " + input.value + "</p>";
}
</script>
</body>
</html>
The step attribute is set to 1800 seconds (30 minutes), so each step operation changes the time by 30 minutes −
Meeting Time: [2024-06-15T14:00 datetime picker] [Step Up (30 min)] [Step Down (30 min)] [Get Current Value] (After clicking Step Up: After Step Up: 2024-06-15T14:30)
Updated on: 2026-03-16T21:38:53+05:30
148 Views
Advertisements