HTML DOM Input Date Object Last Updated : 29 Apr, 2024 Comments Improve Suggest changes Like Article Like Report HTML Input Date object represents an <input> element with type="date", enabling users to input dates conveniently via a built-in calendar interface on web forms. 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: ValueDescriptionautocompleteIt is used for setting or returning the value of the autocomplete attribute of a datetime field.autofocusIt is used for setting or returning whether a datetime field should automatically get focus when the page loads.defaultValueIt is used for setting or returning the default value of a datetime field.disabledIt is used for setting or returning whether a datetime field is disabled, or not.formIt is used for returning a reference to the form that contains the datetime field.listIt is used for returning a reference to the datalist that contains the datetime field.maxIt is used for setting or returning the value of the max attribute of the datetime field.minSets or returns the value of the min attribute of the datetime field.nameIt is used for setting or returning the value of the name attribute of a datetime field.readOnlyIt is used for setting or returning whether the datetime field is read-only, or not.requiredIt is used for setting or returning whether the datetime field must be filled out before submitting a form.stepIt is used for setting or returning the value of the step attribute of the datetime field.typeIt is used for returning which type of form element the datetime field is.valueIt is used for setting or returning the value of the value attribute of a datetime field.Input Date Object Methods: MethodDescriptionstepDown()Decrements the value of the input date field by a specified number.stepUp()Increments the value of the input date field by a specified number.select()Selects the content of the input date field.Below programs illustrate the Date Object: Example 1: In this example we creates a date input field upon double-clicking the "Create" button. However, the value provided is invalid as it includes an incorrect time format. HTML <!DOCTYPE html> <html> <head> <title>Input Date Object</title> </head> <body> <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. let c = document.createElement("INPUT"); c.setAttribute("type", "date"); c.setAttribute("value", "2019-07-02T25:32Z"); document.body.appendChild(c); } </script> </body> </html> Output: HTML DOM Input Date Object Example Output Example 2: In this example we demonstrates accessing a date input field and displaying its value upon double-clicking the "Access" button. The input field is pre-filled with an invalid time value. HTML <!DOCTYPE html> <html> <head> <title>Input Date Object</title> </head> <body> <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: HTML DOM Input Date Object Supported Browsers: Google ChromeEdge FirefoxOperaSafari Comment More infoAdvertise with us S Shubrodeep Banerjee Follow Improve Article Tags : Web Technologies HTML HTML-DOM Similar Reads HTML | DOM KeyboardEvent location Property The KeyboardEvent location property is used for returning a number that indicates the location of a key on the keyboard or device. The KeyboardEvent location property can be used on the onkeydown and onkeyup events but not on onkeypress. The number returned by KeyboardEvent location property is repr 2 min read HTML DOM Option label Property The HTML DOM Option label property is used to get or set the label attribute of an <option> element in a drop-down list (<select> element). The label property represents the text label associated with the option, which is shown in the drop-down list.Syntax: It is used to return the label 2 min read HTML DOM | KeyboardEvent altKey Property The KeyboardEvent altKey property in HTML DOM is a read-only property and used to return the boolean value which indicates the alt key is pressed or not. It returns True if alt key is pressed otherwise return false. Syntax: event.altKey Below program illustrates the KeyboardEvent altkey property in 1 min read HTML | DOM Form target Property The DOM Form Target property is used to set or return the value of the target attribute of the form.The Target attribute is used to specify whether the submitted result will open in the current window, a new tab or on a new frame. Syntax: It is used to return the target property. formObject.target I 3 min read HTML | DOM KeyboardEvent shiftKey Property The KeyboardEvent shiftKey property in HTML DOM is a read-only property and used to return a Boolean value which indicates the SHIFT key is pressed or not. The KeyboardEvent shiftKey property returns true if the SHIFT key is pressed, otherwise returns false. Syntax: event.shiftKey Below program illu 1 min read HTML | DOM Form length Property The DOM Form length Property is used to return the number of input field contained in the form. Syntax: formObject.length Return Value: It returns a numeric value which represent the number of input field or elements in the Form. Example-1: Return the number of input field. html <!DOCTYPE html 2 min read HTML | DOM Form acceptCharset Property The DOM Form acceptCharset Property is used to set or return the value of the accept-charset attribute in the form Element. The accept-charset attribute is used to define the character encoding and is used for form submission. The default value of the accept-charset attribute is “UNKNOWN†string whi 2 min read HTML | DOM KeyboardEvent metaKey Property The KeyboardEvent metaKey property in HTML DOM is a read-only property and is used to return a Boolean value which is used to check whether the META key is pressed or not. The KeyboardEvent metaKey property returns true if the META key is pressed, otherwise returns false. Syntax: event.metaKey Below 1 min read HTML DOM Select Object The Select object in HTML DOM is used to represent an HTML <select> element. It provides properties and methods to manipulate the <select> element and its associated <option> elements.Syntax:To create <select> element. document.createElement("SELECT")To access <select> 3 min read HTML | DOM TouchEvent touches Property The TouchEvent touches property in HTML DOM is used to return the array of touch object. It returns one for each finger that is currently touching to the surface. The touches property is a read only property and it returns an array of touch objects. Syntax: event.touches Return Value: It return the 1 min read Like