HTML | DOM Input Datetime Object
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 |
|---|---|
| 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”);”.
<!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
<!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:
Supported Browsers:
- Google Chrome
- Mozilla Firefox
- Edge
- Safari
- Opera
