HTML DOM Input Date Object

HTMLWeb DevelopmentFront 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 −

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

Boolean Value

And, also the following methods −

booleanValueDetails
stepDownIt 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>

Output

This will produce the following output −

Before clicking ‘Change Max Date’ button −

After clicking ‘Change Max Date’ button −

raja
Published on 19-Jul-2019 14:56:53
Advertisements