HTML DOM Input Date Object

Last Updated : 29 Apr, 2024

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:

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:

Method	Description
stepDown()	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>