HTML DOM Input Datetime Object

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 −

HTML DOM Input Datetime Object

After clicking ‘Decrease min age bar’ button −

HTML DOM Input Datetime Object