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: