The Input Month Object in HTML DOM is used to represent an HTML input element with type= "month" attribute. The input element with type= "month" attribute can be accessed by using getElementById() method.
Syntax:
- It is used to access <input> element with type="month" attribute.
document.getElementById("id");- It is used to create <input> element with type="month" attribute.
document.createElement("input");
Property Values:
| Property | Description |
|---|---|
| type | This property is used to return the type of form element of the month field. |
| value | This property is used to set or return the value of the value attribute of a month field. |
| autocomplete | This property is used to set or return the value of the autocomplete attribute of a month field. |
| autofocus | This property is used to set or return whether a month field should automatically get focus when the page loads. |
| defaultValue | This property is used to set or return the default value of a month field. |
| disabled | This property is used to set or return whether a month field is disabled or not. |
| form | This property is used to return reference to the form that contains the month field. |
| list | This property is used to return a reference to the datalist that contains the month field. |
| max | This property is used to set or return the value of the max attribute of a month field. |
| min | This property is used to set or return the value of the min attribute of a month field. |
| name | This property is used to set or return the value of the name attribute of a month field. |
| placeholder | This property is used to set or return the value of the placeholder attribute of a month field. |
| readOnly | This property is used to set or return whether the month field is read-only or not. |
| required | This property is used to set or return whether the month field must be filled out before submitting a form. |
| step | This property is used to set or return the value of the step attribute of a month field. |
Input Month Object Methods:
| Method | Description |
|---|---|
| stepDown() | This method is used to decrements the value of the input month by a specified number. |
| select() | This method is used to select the Input month field content. |
| stepUp() | This method is used to increment the value of the input month by a specified number. |
Example 1: This example use getElementById() method to access <input> element with type="month" attribute.
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Input Month Object
</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>DOM Input Month Object</h2>
<input type = "month" id = "month" value = "2018-02">
<button onclick = "myGeeks()">Click Here!</button>
<p id = "GFG"></p>
<!-- script to access input element of
type month attribute -->
<script>
function myGeeks() {
var val = document.getElementById("month").value;
document.getElementById("GFG").innerHTML = val;
}
</script>
</body>
</html>
Output:
Before click on the button:
After click on the button:
Example 2: This example use document.createElement() method to create <input> element with type="month" attribute.
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Input Month Object
</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>DOM Input Month Object</h2>
<button onclick = "myGeeks()">Click Here!</button>
<!-- script to create input element of
type month attribute -->
<script>
function myGeeks() {
/* Create an input element */
var x = document.createElement("INPUT");
/* Set the type attribute */
x.setAttribute("type", "month");
/* Set the value to type attribute */
x.setAttribute("value", "2018-02");
/* Append the element to body tag */
document.body.appendChild(x);
}
</script>
</body>
</html>
Output:
Before click on the button:
After click on the button:
Supported Browsers:
- Google Chrome 20 and above
- Edge 12 and above
- Opera 11 and above
