HTML | DOM Input Date Object
The Input Date object is used for representing an HTML <input> element of the type=”date”.
The Input Date Object is a new object in HTML5.
Syntax:
- For creating a <input> element with the type =”date”:
var gfg = document.createElement("input") gfg.setAttribute("type", "date");
- For accessing a <input> element with the type =”date”:
document.getElementById("date_object")
Property Values:
Value | Description |
---|---|
autocomplete | It is used for setting or returning the value of the autocomplete attribute of a datetime field. |
autofocus | It is used for setting or returning whether a datetime field should automatically get focus when the page loads. |
defaultValue | It is used for setting or returning the default value of a datetime field. |
disabled | It is used for setting or returning whether a datetime field is disabled, or not. |
form | It is used for returning a reference to the form that contains the datetime field. |
list | It is used for returning a reference to the datalist that contains the datetime field. |
max | It is used for setting or returning the value of the max attribute of the datetime field. |
min | Sets or returns the value of the min attribute of the datetime field. |
name | It is used for setting or returning the value of the name attribute of a datetime field. |
readOnly | It is used for setting or returning whether the datetime field is read-only, or not. |
required | It is used for setting or returning whether the datetime field must be filled out before submitting a form. |
step | It is used for setting or returning the value of the step attribute of the datetime field. |
type | It is used for returning which type of form element the datetime field is. |
value | It is used for setting or returning the value of the value attribute of a datetime field. |
Input Date Object Methods:
- stepDown() : It is used for decrementing the value of the datetime field by a specified number.
- stepUp() : It is used for incrementing the value of the datetime field by a specified number.
Below programs illustrate the Date Object:
Example-1: Creating a <input> element with the type =”date”.
<!DOCTYPE html> < html > < head > < title >Input Date Object</ title > < style > h1 { color: green; } h2 { font-family: Impact; } body { text-align: center; } </ style > </ head > < body > < h1 >GeeksforGeeks</ h1 > < h2 >Input Date Object</ h2 > < p >Double Click the "Create" button to create a Date field. </ p > < button ondblclick = "Create()" >Create </ button > < script > function Create() { // create input element type date. var c = document.createElement("INPUT"); c.setAttribute("type", "date"); c.setAttribute("value", "2019-07-02T25:32Z"); document.body.appendChild(c); } </ script > </ body > </ html > |
Output:
Before clicking the button:
After clicking the button:
Example-2: Accessing a <input> element with the type =”date”.
<!DOCTYPE html> < html > < head > < title >Input Date Object</ title > < style > h1 { color: green; } h2 { font-family: Impact; } body { text-align: center; } </ style > </ head > < body > < h1 >GeeksforGeeks</ h1 > < h2 >Input Date Object</ h2 > < input type = "date" id = "test" value = "2019-07-02T25:32Z" > < p >Double Click the "Access" button to access a Date field.</ p > < button ondblclick = "Access()" >Access </ button > < p id = "check" ></ p > < script > function Access() { // Accessing input element type =”date” var a = document.getElementById( "test").value; document.getElementById( "check").innerHTML = a; } </ script > </ body > </ html > |
Output:
After clicking the button
Supported Browsers:
- Opera
- Firefox
- Google Chrome
- Apple Safari
Recommended Posts:
- HTML | <input type="date">
- HTML | DOM Input Date name Property
- HTML | DOM Input Date value Property
- HTML | DOM Input Date min Property
- HTML | DOM Input Date max Property
- HTML | DOM Input Date type Property
- HTML | DOM Input Date required Property
- HTML | DOM Input Date autocomplete Property
- HTML | DOM Input Date step Property
- HTML | DOM Input Date disabled Property
- HTML | DOM Input Date defaultValue Property
- How to set placeholder value for input type date in HTML 5 ?
- HTML | DOM Input Date stepDown( ) Method
- HTML | DOM Input Date readOnly Property
- HTML | DOM Input Date form Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.