HTML | DOM Input Date min Property

07 Dec, 2021
The Input Date min property is used for setting or returning the value of the min attribute of a date field. The attribute returns a string that represents the minimum date allowed.
Syntax: 
For returning the min property:
inputdateObject.min
For setting the min property:
inputdateObject.min = YYYY-MM-DD
Property Value: 
YYYY-MM-DDThh:mm:ssTZD :It is used to specify the minimum date and time allowed. YYYY: It specifies the year.MM: It specifies the month.DD: It specifies the day of the month.T: It specifies the separator if time is also entered.hh: It specifies the hour.mm: It specifies the minutes.ss: It specifies the seconds.TZD: It specifies the Time Zone Designator.
YYYY: It specifies the year.
MM: It specifies the month.
DD: It specifies the day of the month.
T: It specifies the separator if time is also entered.
hh: It specifies the hour.
mm: It specifies the minutes.
ss: It specifies the seconds.
TZD: It specifies the Time Zone Designator.
Return Values: It returns a string value which represents the minimum date  that has been allowed for date field.  
Below program illustrates the Date min property:Example 1: Getting the minimum date allowed for a date field. 
html
<!DOCTYPE html><html>  <head>    <title>Input Date min 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 min Property</h2>    <br>          <p>The range of date accepted is between 2019-02-18 and 2019-02-20:        <input type="date" id="Test_Date" min="2019-02-18" max="2019-02-20">              <p>To return the min range of the date field,          double click the "Return Min" button.</p>              <button ondblclick="My_Date()">Return Min</button>          <p id="test"></p>              <script>            function My_Date() {                var d = document.getElementById("Test_Date").min;                document.getElementById("test").innerHTML = d;            }        </script>  </body>  </html>                                          
Output:  Before:
After clicking the button: 
Example-2: Below code sets the Input Date min property. 
HTML
<!DOCTYPE html><html>  <head>    <title>Input Date min 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 min Property</h2>    <br>:        <input type="date"                id="Test_Date"                min="2019-02-18"                max="2019-02-20">              <p>To set  the min range of the date field,        double click the "Set Min" button.</p>              <button ondblclick="My_Date()">Set Min</button>          <p id="test"></p>              <script>            function My_Date() {                var d = document.getElementById("Test_Date").min =                     "2019-01-01";                document.getElementById("test").innerHTML = d;            }        </script>  </body>  </html>
Before:
After double clicking the button:
Supported Web Browsers:  
Apple Safari
Internet Explorer
Firefox
Google Chrome
Opera
 
ManasChhabra2
hritikbhatnagar2182
chhabradhanvi
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)
CSS to put icon inside an input element in a form
Design a Tribute Page using HTML & CSS
Types of CSS (Cascading Style Sheet)
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array