HTML DOM Input Month Object

HTML Web Development Front End Technology

The HTML DOM input month Object represent the <input> element with type=”month”.

Let us create input month object −

Syntax

Following is the syntax −

var monthInput = document.createElement(“INPUT”);
monthInput.setAttribute(“type”,”month”);

Properties

Following are the properties of HTML DOM input month Object −

Property	Explanation
autocomplete	It returns and alter the value of the autocomplete attribute of month input field.
autofocus	It returns and modify whether the input month field should get focused or not when page load.
disabled	It returns and modify whether the input month field is disabled or not.
defaultValue	It returns and alter the default value of the input month field.
form	It returns the reference of the form that contain the input month field in the HTML document.
list	It returns the reference of the datalist that contain the input month field.
max	It returns and modify the value of the max attribute of input month field.
min	It returns and modify the value of the min attribute of input month field.
name	It returns and alter the value of the name attribute of input month field.
readOnly	It returns and modify whether the input month field is read-only or not.
required	It returns and modify whether the month field must be filled out before submitting the form.
step	It returns and alter the value of the set attribute of input month field.
type	It returns the value of the type attribute of month input field.
value	It returns and modify the content of the value attribute of month input field.

Methods

Following are the methods of HTML DOM input month Object

Method	Explanation
stepUp()	It increments the value of input month field by the value specified in its parameter.
stepDown()	It decrements the value of input month field by the value specified in its parameter.

Example

Let us see an example of HTML DOM input month object −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
      background-color:#fff;
      color:#0197F6;
   }
   h1{
      color:#23CE6B;
   }
   .btn{
      background-color:#fff;
      border:1.5px dashed #0197F6;
      height:2rem;
      border-radius:2px;
      width:60%;
      margin:2rem auto;
      display:block;
      color:#0197F6;
      outline:none;
      cursor:pointer;
   }
</style>
</head>
<body>
<h1>DOM Input month Object Example</h1>
<button onclick="createMonthField()" class="btn">Create an input month field</button>
<script>
   function createMonthField() {
      var monthInput = document.createElement("INPUT");
      monthInput.setAttribute("type", "month");
      monthInput.setAttribute("value", "2019-07");
      document.body.appendChild(monthInput);
   }
</script>
</body>
</html>