HTML DOM Input Month value Property
The HTML DOM input month value property returns and modify the value of the value attribute of an input month field.
Syntax
Following is the syntax −
1. Returning value
object.value
2. Modifying value
object.value = true | false
Example
Let us see an example of HTML DOM input month value 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 value property Demo</h1>
<p>Hi, Select any month for your holiday</p>
<input type="month" class="monthInput">
<button type="button" onclick="getValue()" class="btn">Click me to show
value</button>
<div class="show"></div>
<script>
function getValue() {
var monthInput = document.querySelector(".monthInput");
document.querySelector(".show").innerHTML = " "+ "Value = " +
monthInput.value + "";
}
</script>
</body>
</html>Output
This will produce the following output −
Select any month and then click on “Click me to show value” button to display selected value.
Published on 18-Jul-2019 08:45:19
