Open In App
Related Articles

HTML | DOM Input Datetime max Property

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

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

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


Property Value: 
 

  • YYYY-MM-DDThh:mm:ssTZD : It is used to specify the maximum 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 defines the maximum date and time for the DateTime Field. 

Below program illustrates the Datetime Max property :
Example 1: Getting the maximum date and time allowed for a datetime field. 

html

<!DOCTYPE html>
<html>
 
<head>
    <title>Input Datetime max 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 max 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 max range of the datetime field,
               double click the "Return Max" button.</p>
 
 
 
 
        <button ondblclick="My_Datetime()">Return Max</button>
 
        <p id="test"></p>
 
 
 
 
        <script>
            function My_Datetime() {
                var d = document.getElementById("Test_Datetime").max;
                document.getElementById("test").innerHTML = d;
            }
        </script>
 
</body>
 
</html>
 
                                          

                    

Output: 
 Before:


After clicking the button 
 


Example 2: Setting the datetime max property

HTML

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

                    

Output:

Before:


After clicking the button 

2020-02-02

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