HTML | DOM Input Date value Property - GeeksforGeeks

03 Feb, 2022
The Input Date value property is used for setting or returning the value of the value attribute of a date field. The Input Date value attribute can be used for specifying a date for the date field.Syntax:  
For returning the value property:  
inputdateObject.value
For setting the value property:  
inputdateObject.value = YYYY-MM-DD
Property Value:  
YYYY-MM-DD :It is used to specify the date. YYYY: It specifies the year.MM: It specifies the month.DD: It specifies the day of the month.
YYYY: It specifies the year.
MM: It specifies the month.
DD: It specifies the day of the month.
Return Value: It returns a string value which specify the value of date for the date field. 
Below program illustrates the Date value property :Setting a date for a datetime field.  
html
<!DOCTYPE html><html> <head>    <title>Input Date value Property in HTML</title>    <style>        h1 {            color: green;        }                 h2 {            font-family: Impact;        }                 body {            text-align: center;        }    </style></head> <body>     <h1>GeeksforGeeks</h1>    <h2>Input Date value Property</h2>    <br> Date Of Birth:    <input type="date" id="Test_Date">        <p>To set a date for the date field,      double-click the "Set Date" button.</p>        <button ondblclick="My_Date()">Set Date</button>     <p id="test"></p>        <script>        function My_Date() {            document.getElementById("Test_Date").value = "2019-02-04";        }    </script> </body>
Output:  
After clicking the button  
Example-2: Below code retuens a date value property. 
HTML
<!DOCTYPE html><html> <head>    <title>Input Date value Property in HTML</title>    <style>        h1 {            color: green;        }                 h2 {            font-family: Impact;        }                 body {            text-align: center;        }    </style></head> <body>     <h1>GeeksforGeeks</h1>    <h2>Input Date value Property</h2>    <br> Date Of Birth:    <input type="date" id="Test_Date" value="2013-12-12">        <p>To return a date for the date field,    double-click the "Set Date" button.</p>        <button ondblclick="My_Date()">Return Date</button>     <p id="test"></p>        <script>        function My_Date() {        var g =    document.getElementById("Test_Date").value;        document.getElementById('test').innerHTML= g;                     }    </script> </body>
Before:
After:
Supported Web Browsers:  
Apple Safari
Internet Explorer
Firefox
Google Chrome
Opera
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
ManasChhabra2
hritikbhatnagar2182
sumitgumber28
HTML-DOM
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
How to Insert Form Data into Database using PHP ?
CSS to put icon inside an input element in a form
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript