Open In App
Related Articles

HTML | DOM Input Date min Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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.


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


 



Last Updated : 07 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads