Open In App

HTML | DOM Input Datetime min Property

Improve
Improve
Like Article
Like
Save
Share
Report

The Input Datetime min property is used for setting or returning the value of the min attribute of a datetime field. 
The Input Datetime min attribute returns a string that represents the minimum date and time allowed.

Syntax: 

  • For returning the min property:
datetimeObject.min
  • For setting the min property:
datetimeObject.min = YYYY-MM-DDThh:mm:ssTZD

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 and time that has been allowed for datetime field. 

Below program illustrates the DateTime Min property :
Example 1: Getting the minimum date and time allowed for a DateTime field.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Input Datetime 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 Datetime min Property</h2>
    <br>
 
     
 
 
<p>The range of date and time accepted is between
      2019-02-18 12:00 AM and 2019-02-20 12:00 AM:</p>
 
 
 
     <input type="datetime" id="Test_Datetime"
             min="2019-02-18T12:00Z" max="2019-02-20T12:00Z">
 
         
 
 
<p>To return the min range of the datetime field,
                double click the "Return Min" button.</p>
 
 
 
 
        <button ondblclick="My_Datetime()">Return Min</button>
 
        <p id="test"></p>
 
 
 
 
        <script>
            function My_Datetime() {
                var d = document.getElementById("Test_Datetime").min;
                document.getElementById("test").innerHTML = d;
            }
        </script>
 
</body>
 
</html>
 
                                          


Output: 
 Before:

After clicking the button:
 

Example 2: Setting the Input datetime min property

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Input Datetime 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 Datetime min Property</h2>
    <br>
 
     <input type="datetime" id="Test_Datetime"
             min="2019-02-18T12:00Z" max="2019-02-20T12:00Z">
 
         
 
 
<p>To set the min range of the datetime field,
                double click the "Set Min" button.</p>
 
 
 
 
        <button ondblclick="My_Datetime()">Set Min</button>
 
        <p id="test"></p>
 
 
 
 
        <script>
            function My_Datetime() {
                var d = document.getElementById("Test_Datetime").min =
                    "2018-02-13";
                document.getElementById("test").innerHTML = d;
            }
        </script>
 
</body>
 
</html>
 
                                          


Output:

Before:

After clicking the button:

Note: The <input type=”datetime”> element does not show any datetime field/calendar in any major browsers, except Safari.

Supported Web Browsers 

  • Apple Safari
  • Internet Explorer
  • Firefox
  • Google Chrome
  • Opera


Last Updated : 24 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads