HTML | DOM Input Date Object

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:

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 Date 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.

Below programs illustrate the Date Object:
Example-1: Creating a <input> element with the type =”date”.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Before clicking the button:

After clicking the button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

After clicking the button

Supported Browsers:

  • Opera
  • Firefox
  • Google Chrome
  • Apple Safari


My Personal Notes arrow_drop_up

I am a technology enthusiast who has a keen interest in programming I am pursuing Engineering in Computer Science from GEU, Dehradun I like to unwind by watching movies and English sitcomsI have a keen interest in music

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.