
- HTML Tutorial
- HTML - Home
- HTML - Overview
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Comments
- HTML - Images
- HTML - Tables
- HTML - Lists
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Frames
- HTML - Iframes
- HTML - Blocks
- HTML - Backgrounds
- HTML - Colors
- HTML - Fonts
- HTML - Forms
- HTML - Embed Multimedia
- HTML - Marquees
- HTML - Header
- HTML - Style Sheet
- HTML - Javascript
- HTML - Layouts
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- HTML - Fonts Ref
- HTML - Events Ref
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
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 −
After clicking ‘Decrease min age bar’ button −
- Related Articles
- HTML DOM Input Datetime autofocus Property
- HTML DOM Input Datetime disabled Property
- HTML DOM Input Datetime form Property
- HTML DOM Input Datetime max Property
- HTML DOM Input Datetime min Property
- HTML DOM Input Datetime name Property
- HTML DOM Input Datetime readOnly Property
- HTML DOM Input Datetime required Property
- HTML DOM Input Datetime type Property
- HTML DOM Input Datetime value Property
- HTML DOM Input URL Object
- HTML DOM Input Week Object
- HTML DOM Input Reset object
- HTML DOM Input Search object
- HTML DOM Input Text object

Advertisements