Syntax error HTML DOM Input Month defaultValue Property

HTML DOM Input Month defaultValue Property



The HTML DOM input month defaultValue property returns and modify the default value of input field of type=”month” in a HTML document.

Syntax

Following is the syntax −

1. Returning default value

object.defaultValue

2. Modifying default value

object.defaultValue=value

Here, value is any date in form of string for example “2019-03”

Example

Let us see an example of HTML DOM input month defaultValue 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.2rem;
   }
   input{
      width:35%;
      border:2px solid #fff;
      background-color:transparent;
      color:#fff;
      font-weight:bold;
      padding:8px;
   }
   .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;
      font-weight:bold;
   }
</style>
</head>
<body>
<h1>DOM Input month defaultValue Example</h1>
<p>Hi, Enter your month of birth</p>
<input type="month" class="monthInput">
<button onclick="changeValue()" class="btn">Submit</button>
<div class="show"></div>
<script>
   function changeValue() {
      var monthInput = document.querySelector(".monthInput");
      var showMsg = document.querySelector(".show");
      monthInput.defaultValue = "1997-10";
      monthInput.value= monthInput.defaultValue;
      showMsg.innerHTML =":D hehe I changed your month of birth into mine!";
   }
</script>
</body>
</html>

Output

This will produce the following result −

Now enter your month of birth and then click on “Submit” button.


Here you can observe that your selected month gets replaced by my default month “October- 1997”.

Updated on: 2019-07-30T22:30:26+05:30

131 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements