The HTML DOM Input Datetime Object represents an input HTML element with type datetime. Also, major browsers, except safari take type datetime as text only.
Syntax
Following is the syntax −
Creating an <input> with type datetime
var datetimeObject = document.createElement(“input”); datetimeObject.type = “datetime”;
Attributes
Here, “datetimeObject” can have the following attributes −
Attributes | Description |
---|---|
autocomplete | It defines the value of autocomplete attribute of a datetime field |
autofocus | It defines if the datetime field should be focused on initial page load. |
defaultValue | It sets/returns the default value of datetime field |
disabled | It defines if datetime field is disabled/enabled |
form | It returns/sets the value of max attribute of datetime field |
min | It returns/sets the value of min attribute of datetime field |
name | It defines the value of name attribute of a datetime field |
readOnly | It defines if the datetime field is read only or not |
required | It defines if the datetime field is compulsory to be filled in order to submit the form |
step | It defines the value of the step attribute of datetime field |
type | It returns the type of form element of datetime field |
value | It defines the value of the value attribute of a datetime field |
Boolean Values
And, also the following methods −
booleanValue | Details |
---|---|
stepDown | It defines the number the datetime field should decrease. |
stepUp | It defines the number the datetime field should increase. |
Example
Let us see an example of Input Datetime min property −
<!DOCTYPE html> <html> <head> <title>Input Datetime Min</title> </head> <body> <form> Date & Time: <input type="datetime" id="dateTime" name="DateSelect" value="2009-6-24T20:49Z" min="2008-12-31T23:59:59Z"> </form> <button onclick="minDateDecrease()">Decrease min age bar</button> <div id="divDisplay"></div> <script> var inputDatetime = document.getElementById("dateTime"); var divDisplay = document.getElementById("divDisplay"); divDisplay.textContent = 'Minimum Age Bar: '+inputDatetime.min; function minDateDecrease() { inputDatetime.min = '2010-12-31T23:59:59Z'; divDisplay.textContent = 'Minimum Age Bar: '+inputDatetime.min; } </script> </body> </html>
Output
This will produce the following output −
Before clicking ‘Decrease min age bar’ button −
After clicking ‘Decrease min age bar’ button −