HTML DOM Month Object: Accessing Month Input Elements

The HTML DOM Month object provides a way to access and manipulate the <input type="month"> elements in your HTML document using JavaScript. This type of input allows users to select a specific month and year, offering a convenient and standardized method for date selection in web forms. This article will explore how to interact with month input elements using the DOM, covering essential properties and methods.

Understanding the <input type="month"> Element

The <input type="month"> element is an HTML5 form control that provides a user interface for selecting a month and year. When rendered in a browser, it typically displays a date picker, allowing users to navigate through different months and years. Key features of this input type include:

• Simplified Month Selection: Provides a calendar-like interface, making it easy for users to pick a specific month and year.
• Standardized Date Input: Offers a consistent input method across different browsers.
• Accessibility: Designed to be accessible with screen readers and other assistive technologies.

Purpose of the HTML DOM Month Object

The HTML DOM Month object allows you to:

• Dynamically access and modify the month input value.
• Validate user input for correct month and year format.
• Trigger JavaScript actions based on user interaction with the month input.
• Programmatically set and retrieve the month and year.

Accessing Month Input Elements

To access a month input element, you first need to have it included in your HTML document with an ID attribute so that it can be targeted by javascript using getElementById() method:

<input type="month" id="myMonth" name="monthInput">

Then in your Javascript, use document.getElementById() to get the input element:

const monthInput = document.getElementById("myMonth");

monthInput is now a reference to the HTML input element. You can use this reference to read the value or manipulate the input.

Key Properties of the Month Object

Here’s a breakdown of the key properties available through the HTML DOM Month object:

Property	Type	Description
`value`	String	The current value of the month input, formatted as “YYYY-MM”. When the field is empty, an empty string is returned.
`type`	String	Returns the type of input control, which is always “month” for `` elements.
`defaultValue`	String	Returns the default value of the month input, formatted as “YYYY-MM”. If no default value was set, returns an empty string.
`name`	String	Returns the `name` attribute of the element, used when submitting form data.
`form`	HTMLFormElement	Returns the HTML form element that contains the month input element. Returns `null` if the input is not part of any form.
`disabled`	Boolean	A boolean value indicating if the input is disabled or not. Set to `true` to disable the input field and `false` to enable it.
`readOnly`	Boolean	A boolean value indicating if the input is read only or not. Set to `true` to make it read only and `false` to allow editing.
`required`	Boolean	A boolean value indicating if the input is required or not. Set to `true` to make the input required and `false` to make it optional.

Note: When the <input type="month"> field is empty, the value property returns an empty string (“”). 📝

Basic Examples

Let’s explore some practical examples of how to use the HTML DOM Month object. Each example below includes the necessary HTML and JavaScript code to demonstrate specific functionalities.

Getting and Setting the Month Input Value

This example shows how to get and set the value of a month input element.

<label for="monthInput1">Select a month:</label>
<input type="month" id="monthInput1" value="2024-01"><br><br>
<button id="getValueBtn1">Get Value</button>
<button id="setValueBtn1">Set Value</button>

<div id="output1"></div>

<script>
  const monthInput1 = document.getElementById("monthInput1");
  const getValueBtn1 = document.getElementById("getValueBtn1");
  const setValueBtn1 = document.getElementById("setValueBtn1");
  const output1 = document.getElementById("output1");

  getValueBtn1.addEventListener("click", () => {
      output1.textContent = `Current value: ${monthInput1.value}`;
    });

  setValueBtn1.addEventListener("click", () => {
     monthInput1.value = '2024-06';
    output1.textContent = 'Month value is set to 2024-06';
    });
</script>

Output:
Initially, you will see an input with value “2024-01”. After clicking “Get Value”, the output div will show “Current Value: 2024-01”. After clicking “Set Value”, the month input changes to “2024-06”, and output shows “Month value is set to 2024-06”.

Getting the Input Type

This example shows how to retrieve the type of the input.

<input type="month" id="monthInput2" value="2024-03"><br><br>
<button id="getTypeBtn2">Get Input Type</button>

<div id="output2"></div>

<script>
  const monthInput2 = document.getElementById("monthInput2");
  const getTypeBtn2 = document.getElementById("getTypeBtn2");
  const output2 = document.getElementById("output2");

  getTypeBtn2.addEventListener("click", () => {
    output2.textContent = `Input type: ${monthInput2.type}`;
  });
</script>

Output:
Clicking the “Get Input Type” button will display “Input type: month” in the output div.

Accessing the Default Value

This example shows how to get the default value of a month input.

<input type="month" id="monthInput3" value="2024-04"  defaultValue="2024-02"><br><br>
<button id="getDefaultValueBtn3">Get Default Value</button>

<div id="output3"></div>

<script>
  const monthInput3 = document.getElementById("monthInput3");
  const getDefaultValueBtn3 = document.getElementById("getDefaultValueBtn3");
    const output3 = document.getElementById("output3");

  getDefaultValueBtn3.addEventListener("click", () => {
    output3.textContent = `Default value: ${monthInput3.defaultValue}`;
  });
</script>

Output:
Clicking the “Get Default Value” button will display “Default value: 2024-02” in the output div.

Accessing the Name Attribute

This example demonstrates how to access the name attribute of a month input.

<input type="month" id="monthInput4" name="myMonthInputName" value="2024-05" ><br><br>
<button id="getNameBtn4">Get Name</button>

<div id="output4"></div>

<script>
  const monthInput4 = document.getElementById("monthInput4");
  const getNameBtn4 = document.getElementById("getNameBtn4");
  const output4 = document.getElementById("output4");

  getNameBtn4.addEventListener("click", () => {
    output4.textContent = `Name attribute: ${monthInput4.name}`;
  });
</script>

Output:
Clicking the “Get Name” button will display “Name attribute: myMonthInputName” in the output div.

Checking if Disabled or Not

This example illustrates how to check if a month input element is disabled and how to disable it dynamically.

<input type="month" id="monthInput5" value="2024-06" >
<button id="checkDisabledBtn5">Check Disabled</button>
<button id="toggleDisabledBtn5">Toggle Disabled</button>

<div id="output5"></div>

<script>
  const monthInput5 = document.getElementById("monthInput5");
  const checkDisabledBtn5 = document.getElementById("checkDisabledBtn5");
  const toggleDisabledBtn5 = document.getElementById("toggleDisabledBtn5");
    const output5 = document.getElementById("output5");

  checkDisabledBtn5.addEventListener("click", () => {
    output5.textContent = `Disabled: ${monthInput5.disabled}`;
  });

  toggleDisabledBtn5.addEventListener("click", () => {
     monthInput5.disabled = !monthInput5.disabled;
    output5.textContent = `Disabled: ${monthInput5.disabled}`;
  });
</script>

Output: Initially, clicking “Check Disabled” will display “Disabled: false”. After clicking “Toggle Disabled”, it will display “Disabled: true”, and the input element will be disabled, and again if you click “Toggle Disabled”, it will be re-enabled.

Checking if ReadOnly or Not

This example illustrates how to check if a month input element is read-only and how to toggle this setting.

<input type="month" id="monthInput6" value="2024-07">
<button id="checkReadOnlyBtn6">Check ReadOnly</button>
<button id="toggleReadOnlyBtn6">Toggle ReadOnly</button>

<div id="output6"></div>

<script>
  const monthInput6 = document.getElementById("monthInput6");
  const checkReadOnlyBtn6 = document.getElementById("checkReadOnlyBtn6");
  const toggleReadOnlyBtn6 = document.getElementById("toggleReadOnlyBtn6");
    const output6 = document.getElementById("output6");

  checkReadOnlyBtn6.addEventListener("click", () => {
      output6.textContent = `Read Only: ${monthInput6.readOnly}`;
    });

  toggleReadOnlyBtn6.addEventListener("click", () => {
    monthInput6.readOnly = !monthInput6.readOnly;
        output6.textContent = `Read Only: ${monthInput6.readOnly}`;
    });
</script>

Output:
Initially, clicking “Check ReadOnly” will show “Read Only: false”. After clicking “Toggle ReadOnly”, it will show “Read Only: true”, making the input read-only. Clicking “Toggle ReadOnly” again will make the input editable.

Checking if Required or Not

This example shows how to check if a month input is required and how to set the required attribute dynamically.

<input type="month" id="monthInput7" value="2024-08">
<button id="checkRequiredBtn7">Check Required</button>
<button id="toggleRequiredBtn7">Toggle Required</button>

<div id="output7"></div>

<script>
  const monthInput7 = document.getElementById("monthInput7");
  const checkRequiredBtn7 = document.getElementById("checkRequiredBtn7");
  const toggleRequiredBtn7 = document.getElementById("toggleRequiredBtn7");
  const output7 = document.getElementById("output7");

  checkRequiredBtn7.addEventListener("click", () => {
    output7.textContent = `Required: ${monthInput7.required}`;
  });

  toggleRequiredBtn7.addEventListener("click", () => {
    monthInput7.required = !monthInput7.required;
        output7.textContent = `Required: ${monthInput7.required}`;
  });
</script>

Output: Initially, clicking “Check Required” will show “Required: false”. After clicking “Toggle Required”, it will show “Required: true”, making the input required. Clicking “Toggle Required” again will make it optional.

Real-World Applications of the Month Object

The HTML DOM Month object is essential for handling date inputs in various applications:

• Event Calendars: Allowing users to select months for specific events or appointments.
• Date Range Filters: Implementing month-based filters in dashboards or reports.
• Financial Applications: Managing transaction records or budget tracking.
• Booking Systems: Enabling users to specify the desired month for reservations or bookings.

Browser Support

The <input type="month"> element and its associated DOM properties are widely supported across modern web browsers.

Note: Always test your form elements across different browsers to ensure a consistent user experience. 🧐

Conclusion

The HTML DOM Month object is a powerful tool for handling month input elements in web forms. By using the properties and methods outlined in this guide, you can effectively access, manipulate, and validate the user’s input. This ensures that your forms are both user-friendly and efficient, providing a better user experience for your web applications.