HTML DOM Input Month Object


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 −

PropertyExplanation
autocompleteIt returns and alter the value of the autocomplete attribute of month input field.
autofocusIt returns and modify whether the input month field should get focused or not when page load.
disabledIt returns and modify whether the input month field is disabled or not.
defaultValueIt returns and alter the default value of the input month field.
formIt returns the reference of the form that contain the input month field in the HTML document.
listIt returns the reference of the datalist that contain the input month field.
maxIt returns and modify the value of the max attribute of input month field.
minIt returns and modify the value of the min attribute of input month field.
nameIt returns and alter the value of the name attribute of input month field.
readOnlyIt returns and modify whether the input month field is read-only or not.
requiredIt returns and modify whether the month field must be filled out before submitting the form.
stepIt returns and alter the value of the set attribute of input month field.
typeIt returns the value of the type attribute of month input field.
valueIt returns and modify the content of the value attribute of month input field.

Methods

Following are the methods of HTML DOM input month Object

MethodExplanation
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>

Output

This will produce the following output −

Click on “Create an input month field” button to generate an input month field −

raja
Published on 17-Jul-2019 11:44:30
Advertisements