Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 −
Updated on: 2019-07-30T22:30:26+05:30
216 Views
Advertisements