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 |
---|---|
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;"> w3wiki </ 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;"> w3wiki </ 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