HTML DOM Input Date Object

HTML Web Development Front End Technology

The HTML DOM Input Date Object represents an input HTML element with type date.

Syntax

Following is the syntax −

Creating an <input> with type date

var dateObject = document.createElement(“input”);
dateObject.type = “date”;

Attributes

Here, “dateObject” can have the following attributes −

Attributes	Description
autocomplete	It defines the value of autocomplete attribute of a date field
autofocus	It defines if the date field should be focused on initial page load.
defaultValue	It sets/returns the default value of date field
disabled	It defines if date field is disabled/enabled
form	It returns a reference of enclosing form that contains the date field
max	It returns/sets the value of max attribute of date field
min	It returns/sets the value of min attribute of date field
name	It defines the value of name attribute of a date field
readOnly	It defines if the date field is read only or not
required	It defines if the date field is compulsory to be filled in order to submit the form
step	It defines the value of the step attribute of date field
type	It returns the type of form element of date field
value	It defines the value of the value attribute of a date field

Boolean Value

And, also the following methods −

booleanValue	Details
stepDown	It defines the amount of days the date field should increase.
stepUp	It defines the amount of days the date field should increase.

Example

Let us see an example of Input Date max property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<title>Input Date Max</title>
</head>
<body>
<form>
Date Select: <input type="date" id="date" name="DateSelect" max="2018-12-31">
</form>
<button onclick="getMaxDate()">Change Max Date</button>
<div id="divDisplay"></div>
<script>
   var inputDate = document.getElementById("date");
   var divDisplay = document.getElementById("divDisplay");
   divDisplay.textContent = 'Max of date input: '+inputDate.max;
   function getMaxDate() {
      var oldInputDate = inputDate.max;
      inputDate.max = '2020-12-31';
      divDisplay.textContent = 'Max of date input: '+inputDate.max;
   }
</script>
</body>
</html>