HTML DOM Input Datetime Object

HTMLWeb DevelopmentFront End Technology

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 −

AttributesDescription
autocompleteIt defines the value of autocomplete attribute of a datetime field
autofocusIt defines if the datetime field should be focused on initial page load.
defaultValueIt sets/returns the default value of datetime field
disabledIt defines if datetime field is disabled/enabled
formIt returns/sets the value of max attribute of datetime field
minIt returns/sets the value of min attribute of datetime field
nameIt defines the value of name attribute of a datetime field
readOnlyIt defines if the datetime field is read only or not
requiredIt defines if the datetime field is compulsory to be filled in order to submit the form
stepIt defines the value of the step attribute of datetime field
typeIt returns the type of form element of datetime field
valueIt defines the value of the value attribute of a datetime field

Boolean Values

And, also the following methods −

booleanValueDetails
stepDownIt defines the number the datetime field should decrease.
stepUpIt defines the number the datetime field should increase.

Example

Let us see an example of Input Datetime min property −

 Live Demo

<!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 −

raja
Published on 23-Jul-2019 17:49:11
Advertisements