Javascript Reference - HTML DOM Input Date Object

The Input Date object represents an HTML <input> element with type="date".

Input Date Object Properties

Property	Description
autocomplete	Sets or gets the autocomplete attribute of a date field
autofocus	Sets or gets whether a date field can automatically get focus when the page loads
defaultValue	Sets or gets the default value of a date field
disabled	Disable or enable a date field
form	Returns a reference to the form that contains the date field
list	Get a reference to the datalist that contains the date field
max	Sets or gets the max attribute of the date field
min	Sets or gets the min attribute of the date field
name	Sets or gets the name attribute of a date field
readOnly	Sets or gets whether the date field is read-only
required	Sets or gets whether the date field must be filled before submitting a form
step	Sets or gets the step attribute of the date field
type	Get type of the date field
value	Sets or gets the value attribute of a date field

Standard Properties and Events

The Input Date object supports the standard properties and events.

Example

We can access an <input> element with type="date" by using getElementById().


<!DOCTYPE html>
<html>
<body>
<input type="date" id="myDate" value="2014-02-09">
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {<!--   ww w  .j  a  va  2  s  .c  o m-->
    var x = document.getElementById("myDate").value;
    document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

We can create an <input> element with type="date" by using the document.createElement() method.


<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {<!--from   w  w w .ja  v a2s  .c o m-->
    var x = document.createElement("INPUT");
    x.setAttribute("type", "date");
    x.setAttribute("value", "2014-05-09");
    document.body.appendChild(x);
}
</script>

</body>
</html>

The code above is rendered as follows: