Open In App

HTML | DOM Input DatetimeLocal Object

Improve
Improve
Like Article
Like
Save
Share
Report

The Input DatetimeLocal object is used for representing an HTML <input> element of the type=”datetime-local”. The Input DatetimeLocal Object is a new object in HTML5. 

Syntax:

  • For creating a <input> element with the type =”datetime-local”:
gfg = document.createElement("input") 
gfg.setAttribute("type", "datetime-local");
  • For accessing a <input> element with the type =”datetime-local”:
document.getElementById("datetimeLocal_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 DatetimeLocal Object Methods:

  • stepDown() : It is used for decrementing the value of the datetime field by a specified number.
  • stepUp() : It is used for incrementing the value of the datetime field by a specified number.
  • select() : It is used to select the contents of the DateTimeLocal field.

Below programs illustrate the Datetime Object: 

Example-1: Creating a <input> element with the type =”datetime-local” . 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Input DatetimeLocal Object</title>
    <style>
        h1 {
            color: green;
        }
         
        h2 {
            font-family: Impact;
        }
         
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>Input DatetimeLocal Object</h2>
    <p>Double Click the "Create" button to
      create a DatetimeLocal field.</p>
    <button ondblclick="Create()">
      Create
      </button>
 
    <script>
        function Create() {
           
            //  Create input element type "datetime-local"
            var c = document.createElement("INPUT");
            c.setAttribute("type", "datetime-local");
            c.setAttribute("value", "2019-07-02T25:32Z");
            document.body.appendChild(c);
        }
    </script>
 
</body>
 
</html>


Output: 

Before clicking the button: 

After clicking the button: 

Example-2: Accessing a <input> element with the type =”datetime-local”. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>HTML | DOM Input DatetimeLocal Object</title>
    <style>
        h1 {
            color: green;
        }
         
        h2 {
            font-family: Impact;
        }
         
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>Input Datetime Object</h2>
    <input type="datetime"
           id="test"
           value="2019-07-02T25:32Z">
    <p>Double Click the "Access"
      button to access a Datetime field.</p>
    <button ondblclick="Access()">Access</button>
    <p id="check"></p>
 
    <script>
        function Access() {
           
            // Accessing input element type value
            var a = document.getElementById(
              "test").value;
           
            document.getElementById(
              "check").innerHTML = a;
        }
    </script>
</body>
 
</html>


Output: 

Before clicking the button: 

After clicking the button: 

Supported Browsers:

  • Google Chrome 20
  • Edge 12
  • Firefox 93
  • Opera 11
  • Safari 14.1


Last Updated : 15 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads