Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Month defaultValue Property
The HTML DOM Input Month defaultValue Property is used to set or return the default value of an input field with type="month". This property represents the initial value that was specified in the HTML value attribute when the page loaded.
Syntax
Following is the syntax for returning the default value −
object.defaultValue
Following is the syntax for setting the default value −
object.defaultValue = value
Here, value is a string representing a month in YYYY-MM format, for example "2019-03" for March 2019.
Parameters
This property accepts the following parameter −
value − A string specifying the default value for the month input field. The format must be
YYYY-MMwhere YYYY is a four-digit year and MM is a two-digit month (01-12).
Return Value
This property returns a string representing the default value of the month input field. If no default value was set, it returns an empty string.
Example − Getting Default Value
Following example demonstrates how to get the default value of a month input field −
<!DOCTYPE html>
<html>
<head>
<title>Get Month Default Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Month Input Default Value</h2>
<p>Birth Month:</p>
<input type="month" id="birthMonth" value="1995-06">
<br><br>
<button onclick="getDefaultValue()">Get Default Value</button>
<p id="result"></p>
<script>
function getDefaultValue() {
var monthInput = document.getElementById("birthMonth");
var defaultVal = monthInput.defaultValue;
document.getElementById("result").innerHTML = "Default Value: " + defaultVal;
}
</script>
</body>
</html>
The output shows the original default value even if the user changes the input −
Default Value: 1995-06
Example − Setting Default Value
Following example demonstrates how to modify the default value dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Set Month Default Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Change Default Value Example</h2>
<p>Select your birth month:</p>
<input type="month" id="monthInput" placeholder="Select month">
<br><br>
<button onclick="setDefault()">Set Default to Jan 2000</button>
<button onclick="resetField()">Reset to Default</button>
<p id="display"></p>
<script>
function setDefault() {
var monthInput = document.getElementById("monthInput");
monthInput.defaultValue = "2000-01";
monthInput.value = monthInput.defaultValue;
document.getElementById("display").innerHTML = "Default value set to: " + monthInput.defaultValue;
}
function resetField() {
var monthInput = document.getElementById("monthInput");
monthInput.value = monthInput.defaultValue;
document.getElementById("display").innerHTML = "Field reset to default: " + monthInput.defaultValue;
}
</script>
</body>
</html>
This example allows you to set a new default value and reset the field to that default −
Default value set to: 2000-01
Example − Comparing Current and Default Values
Following example shows the difference between the current value and default value −
<!DOCTYPE html>
<html>
<head>
<title>Current vs Default Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Current vs Default Value</h2>
<p>Birth Month:</p>
<input type="month" id="monthField" value="1990-12">
<br><br>
<button onclick="compareValues()">Compare Values</button>
<div id="output" style="margin-top: 10px;"></div>
<script>
function compareValues() {
var monthField = document.getElementById("monthField");
var currentValue = monthField.value;
var defaultValue = monthField.defaultValue;
var output = document.getElementById("output");
output.innerHTML = "<p><b>Current Value:</b> " + currentValue + "</p>" +
"<p><b>Default Value:</b> " + defaultValue + "</p>" +
"<p><b>Values Match:</b> " + (currentValue === defaultValue) + "</p>";
}
</script>
</body>
</html>
The output displays both current and default values for comparison −
Current Value: 1990-12 Default Value: 1990-12 Values Match: true
Key Points
The
defaultValueproperty reflects the originalvalueattribute from the HTML markup.Unlike the
valueproperty,defaultValuedoes not change when the user modifies the input field.Setting
defaultValuedoes not automatically update the currentvalueunless explicitly assigned.The month format must be
YYYY-MMwhere the year is four digits and month is two digits (01-12).This property is useful for implementing form reset functionality that restores original values.
Browser Compatibility
The defaultValue property for month input fields is supported in all modern browsers that support the type="month" input type, including Chrome, Firefox, Safari, and Edge. However, some older browsers may not support the month input type itself.
Conclusion
The HTML DOM Input Month defaultValue property provides access to the original value specified in the HTML markup. It is particularly useful for form validation, reset functionality, and comparing user changes against the initial state. Unlike the value property, defaultValue remains constant unless explicitly modified through JavaScript.
170 Views
