Open In App
Related Articles

HTML | DOM Input Date Object

Improve Article
Improve
Save Article
Save
Like Article
Like

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

Syntax: 

  • For creating a <input> element with the type =”date”:
var gfg = document.createElement("input") 
gfg.setAttribute("type", "date");
  • For accessing a <input> element with the type =”date”:
document.getElementById("date_object")

Property Values:

ValueDescription
autocompleteIt is used for setting or returning the value of the autocomplete attribute of a datetime field.
autofocusIt is used for setting or returning whether a datetime field should automatically get focus when the page loads.
defaultValueIt is used for setting or returning the default value of a datetime field.
disabledIt is used for setting or returning whether a datetime field is disabled, or not.
formIt is used for returning a reference to the form that contains the datetime field.
listIt is used for returning a reference to the datalist that contains the datetime field.
maxIt is used for setting or returning the value of the max attribute of the datetime field.
minSets or returns the value of the min attribute of the datetime field.
nameIt is used for setting or returning the value of the name attribute of a datetime field.
readOnlyIt is used for setting or returning whether the datetime field is read-only, or not.
requiredIt is used for setting or returning whether the datetime field must be filled out before submitting a form.
stepIt is used for setting or returning the value of the step attribute of the datetime field.
typeIt is used for returning which type of form element the datetime field is.
valueIt is used for setting or returning the value of the value attribute of a datetime field.

Input Date Object Methods:

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

Below programs illustrate the Date Object: 

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

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Input Date Object</title>
    <style>
        h1 {
            color: green;
        }
         
        h2 {
            font-family: Impact;
        }
         
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>Input Date Object</h2>
    <p>Double Click the "Create" button
          to create a Date field.
      </p>
    <button ondblclick="Create()">Create
      </button>
 
    <script>
        function Create() {
           
         // create input element type date.
         var c = document.createElement("INPUT");
         c.setAttribute("type", "date");
         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 =”date”. 

HTML




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

Output:

Before double clicking the button: 

  

After double clicking the button:

 

Supported Browsers:

  • Opera 11
  • Firefox 57
  • Google Chrome 20
  • Edge 12
  • Apple Safari 14.1

Last Updated : 20 Sep, 2022
Like Article
Save Article
Similar Reads
Related Tutorials