The Input Datetime Object in HTML DOM is used to represent an HTML input element with type= “datetime”. The input element with type= “datetime” can be accessed by using getElementById() method.
Syntax:
- It is used to access input Datetime object.
document.getElementById("id");- It is used to create input element.
document.createElement("input");Input Datetime Object Properties:
| Property | Description |
|---|
| type | This property is used to return which type of form element the Datetime field is. |
|---|
| value | This property is used to set or return the value of the value attribute of a Datetime field. |
|---|
| autocomplete | This property is used to set or return the value of the autocomplete attribute of a Datetime field. |
|---|
| autofocus | This property is used to set or return the Datetime field get focus automatically when the page loads. |
|---|
| defaultValue | This property is used to set or return the default value of a Datetime field. |
|---|
| disabled | This property is used to set or return whether a Datetime field is disabled or not. |
|---|
| form | This property is used to return reference to the form that contains the Datetime field. |
|---|
| list | This property is used to return a reference to the datalist that contains the Datetime field. |
|---|
| max | This property is used to set or return the value of the max attribute of a Datetime field. |
|---|
| min | This property is used to set or return the value of the min attribute of a Datetime field. |
|---|
| name | This property is used to set or return the value of the name attribute of a Datetime field. |
|---|
| placeholder | This property is used to set or return the value of the placeholder attribute of a Datetime field. |
|---|
| readOnly | This property is used to set or return whether the Datetime field is read-only or not. |
|---|
| required | This property is used to set or return whether the Datetime field must be filled out before submitting a form. |
|---|
| step | This property is used to set or return the value of the step attribute of a Datetime field. |
|---|
Input Datetime Object Methods:
| Method | Description |
|---|
| select() | This method is used to select Datetime text field content. |
|---|
| stepDown() | This method is used to decrement the value of the input Datetime by a specified number. |
|---|
| stepUp() | This method is used to increment the value of the input Datetime by a specified number. |
|---|
Example-1: Return date time using “document.getElementById(“id”);”.
html
<!DOCTYPE html>
<html>
<body>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Input Datetime Object</h2>
<input type="datetime"
id="myDatetime"
value="2018-02-07 10:15 AM ">
<p>Click the button to get the date and time of the datetime field.</p>
<button onclick="myFunction()">
Click Here!
</button>
<p id="demo"></p>
<script>
function myFunction() {
// Get datetime value.
var x =
document.getElementById(
"myDatetime").value;
document.getElementById(
"demo").innerHTML = x;
}
</script>
</body>
</html>
|
Output: Before click on the button: 
After click on the button: 
Example-2: Create “datetime” element
html
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Input Datetime Object</h2>
<p>
Click the button to create a Datetime field.
</p>
<button onclick="myFunction()">
Click Here!
</button>
<script>
function myFunction() {
// Create datetime element and
// set attributes.
var x = document.createElement("INPUT");
x.setAttribute("type", "datetime");
x.setAttribute("value", "2018-02-07 10:15 AM");
document.body.appendChild(x);
}
</script>
</body>
</html>
|
Output: Before click on the button: 
After click on the button: 
Note: The <input type=”datetime”> element does not show any datetime field/calendar in any major browsers, except Safari.
Supported Browsers:
- Google Chrome 20
- Edge 12
- Firefox 93
- Opera 11
- Safari 14.1