HTML DOM Input Month step Property

HTML Web Development Front End Technology

The HTML DOM input month step property returns and modify the value of the step attribute of input month field in an HTML document.

Syntax

Following is the syntax −

1. Returning step

object.step

2. Modifying step

object.step = “number”

Example

Let us see an example of HTML DOM input month step property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   html{
      height:100%;
   }
   body{
      text-align:center;
      color:#fff;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
      height:100%;
   }
   p{
      font-weight:700;
      font-size:1.1rem;
   }
   input{
      display:block;
      width:35%;
      border:2px solid #fff;
      background-color:transparent;
      color:#fff;
      font-weight:bold;
      padding:8px;
      margin:1rem auto;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
   .show{
      font-size:1.5rem;
      color:#db133a;
      font-weight:bold;
   }
</style>
</head>
<body>
<h1>DOM Input month step property Demo</h1>
<p>Hi, Select any month for your holiday</p>
<input type="month" class="monthInput">
<button type="button" onclick="setStep()" class="btn">Step = 3</button>
<button type="button" onclick="getStep()" class="btn">Click me to show step
value</button>
<div class="show"></div>
<script>
   function setStep(){
      var monthInput = document.querySelector(".monthInput");
      monthInput.step="3";
   }
   function getStep() {
      var monthInput = document.querySelector(".monthInput");
      var showMsg = document.querySelector(".show");
      showMsg.innerHTML = monthInput.step;
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “Step=3” button to set value of set attribute to 3 and then select any month and then try to change it to understand how set property works.