HTML | DOM Input Datetime autofocus Property

Last Updated : 28 Jun, 2022

The Datetime autofocus property is used to set or return the autofocus of Datetime field. The Datetime autofocus property returns true if the datetime field automatically gets focus when the page loads, else it returns false.
The HTML autofocus attribute is reflected by the Datetime autofocus property.
Syntax:

Returning the autofocus property:

datetimeObject.autofocus

Setting the autofocus property:

datetimeObject.autofocus = true|false

Property Value:

true|false: It is used to specify whether a datetime field should get focus when the page loads, or not. It is false by default.

Return Values: It returns a Boolean value which specify that the Datetime field is autofocus or not.

Below program illustrates the Datetime autofocus property:
Example: Finding out if a DateTime field automatically gets focus upon page load.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
      Input Datetime autofocus Property in HTML
  </title>
    <style>
        h1 {
            color: green;
        }
         
        h2 {
            font-family: Impact;
        }
         
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
 
    <h1>GeeksforGeeks</h1>
    <h2>Input Datetime autofocus Property</h2>
    <br>
 
    <input type="datetime"
           id="test_Datetime"
           autofocus>
 
     
 
 
 
<p>To find out whether the date time field automatically
      gets focus on page load or not,
      double click the "Check" button.</p>
 
 
 
 
 
    <button ondblclick="My_Datetime()">
      Check
  </button>
 
    <p id="test">
  </p>
 
 
 
 
 
    <script>
        function My_Datetime() {
           
            // Return the Datetime autofocus
            // property Value.
            var d =
             document.getElementById(
              "test_Datetime").autofocus;
           
            document.getElementById("test").innerHTML = d;
        }
    </script>
 
</body>
 
</html>

Output:
Before:

After:

Example-2: Below code sets the autofocus property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Input Datetime autofocus Property
    </title>
     
    <style>
        h1 {
            color: green;
        }
         
        h2 {
            font-family: Impact;
        }
         
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
    <h2>
        HTML DOM Input Datetime autofocus Property
    </h2>
 
    <input type="datetime"
        id="test" autofocus>
 
     
 
 
 
<p>Double Click to set the autofocus Property.</p>
 
 
 
 
 
    <button ondblclick="Access()">set autofocus</button>
 
    <p id="check"></p>
 
 
 
 
 
    <script>
        function Access() {
             
            // Accessing input element type "Datetime"
            var a = document.getElementById(
                    "test").autofocus = "false";
             
            document.getElementById(
                    "check").innerHTML = a;
        }
    </script>
 
</body>
 
</html>