Summary -

In this topic, we described about the Datetime-local Input type with detailed example.

Datetime-local input type allows the user to choose date and time. It is equivalent to the date picker. It has made a next and a pre-button with a closing round button in the centre of next and pre, along with AM and PM choices.

Syntax -

<input type="datetime-local" id="arrival-time">

Example -

Datetime-local was explained in the below example.
<!DOCTYPE html>
<html lang="en">
   <head>
       <title>HTML5 Datetime-local Input Type</title>
        <script>
           function getValue() { 
           var datetime = document.getElementById("mydatetime").value;
           alert(datetime);
           }
        </script>
    </head>
    <body>
       <form>
         <label for="mydatetime">Select Date and Time:</label>
         <input type="datetime-local" id="mydatetime">
         <button type="button" onclick="getValue();">Get Value</button>
       </form>
    </body> 
</html>

Output -


Warning: The input type="month" is backed by Safari, Firefox, and Internet Explorer browsers. Presently supported in Edge, Chrome, and Opera browsers.
Browser Support

The following browsers and corresponding versions in the ta ble that completely supports the datetimelocal type.

Input Type Chrome Edge Firefox Safari Opera
Type=”datetime local” 20.0 13.0 Not Supported Not Supported 10.1