Skip to content
Related Articles

Related Articles

HTML | DOM Input Datetime autofocus Property

View Discussion
Improve Article
Save Article
  • 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>

Output:
Before:

After:

Note: The <input type=”datetime”> element does not show any datetime field/calendar in any major browsers, except Safari. 

Supported Browsers : 

  • Apple Safari
  • Internet Explorer
  • Firefox
  • Google Chrome
  • Opera

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!