Skip to content
Related Articles

Related Articles

HTML | DOM Input Time Object

Improve Article
Save Article
  • Last Updated : 30 Aug, 2022
Improve Article
Save Article

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>

Output: 
Before Click on the button: 

After Click on the button: 

Supported Browsers:

  • Google Chrome 20 and above
  • Edge 12 and above
  • Firefox 57 and above
  • Opera 10 and above
  • Safari 14.1 and above

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!