HTML | DOM Input Time Object

Last Updated : 30 Aug, 2022

The Input Time object in HTML DOM represents an <input> element with type = “time” attribute. The time attribute can be accessed by using getElementById() method.

Syntax:

document.getElementById("id");

where id is assigned to the <input> tag.

Property Values:

list: It returns the reference of data list that contains the time field.
form: It returns the reference of form that contains the time field.
autocomplete: It is used to set or return the value of the autocomplete attribute of the time field.
autofocus: It is used to set or return if the time field should automatically get focus when the page loads.
defaultvalue: It is used set or return the default value of a time field.
disabled: It is used to set or return whether a time field is disabled or not.
max: It is used to set or return the value of the max attribute of a time field.
min: It is used to set or return the value of the min attribute of a time field.
name: It is used to set or return the value of the name attribute of a time field.
readOnly: It is used to set or return whether the time field is read-only or not.
required: It is used to set or return whether the time field must be filled out before submitting a form.
step: It is used to set or return the value of step attribute of the time field.
type: It returns the type of form element the time field belongs.
value: It is used set or return the value of the value attribute of a time field.

Methods

stepDown() : It is used for decrementing the value of the time field by a specified number.
stepUp() : It is used for incrementing the value of the time field by a specified number.
select() : It is used to select the content of the Input time field.

Example 1: This example describes the getElementById() method to access the <input> element with type = “time” attribute.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        DOM Input Time Object
    </title>
</head>
<body>
    <center>
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
        <h2>DOM Input Time Object</h2>
        <label for="uname" style="color:green">
            <b>Enter time</b>
        </label>
        <input type="time" id="gfg" placeholder="Enter time">
        <br><br>
        <button type="button" onclick="geeks()">
            Click
        </button>
        <p id="GFG"></p>
 
        <script>
            function geeks() {
                var link = document.getElementById("gfg").value;
                document.getElementById("GFG").innerHTML = link;
            } 
        </script>
    </center>
</body>
</html>

Output:
Before Click on the button:

After Click on the button:

Example 2: This example describes the document.createElement() method to create <input> element with type = “time” attribute.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        DOM Input Time Object
    </title>
</head>
<body>
    <center>
        <h1 style="color:green">
            GeeksForGeeks
        </h1>
        <h2>DOM Input time Object </h2>
        <label for="uname" style="color:green">
            <b>Enter time</b>
        </label>
        <p id="GFG"></p>
 
        <button type="button" onclick="myGeeks()">
            Click
        </button>
        <script>
            function myGeeks() {
                var link = document.createElement("INPUT");
                link.setAttribute("type", "time");
                link.setAttribute("value", "08:08:19");
                document.getElementById("GFG").appendChild(link);
            } 
        </script>
    </center>
</body>
</html>