Monthly Budget Tracker Date Picker

Build a simple date picker for a monthly budget tracking application that allows users to select months (without specific days) for viewing their budget reports.

Requirements

The date picker should:

1. Display a month-only picker interface (no day selection needed)
2. Allow the user to select a single month
3. Display the selected month in a readable format (e.g., "January 2024")
4. Initialize with the current month pre-selected
5. Provide an input field that opens the month picker when clicked

Implementation Details

Create a simple HTML page with:

• An input field for the month picker
• The picker should display months in a grid format
• When a month is selected, update the input field with the selected month

Dependencies { .dependencies }

flatpickr { .dependency }

A lightweight datetime picker library that provides month selection capabilities.

@satisfied-by

Test Cases

The following test cases should be implemented:

• When initialized, the picker displays a month grid instead of a day calendar @test
• When a month is clicked, the input field is updated with the selected month in "Month YYYY" format @test
• The picker initializes with the current month pre-selected @test

Expected Output

When running the application:

1. A text input field should be visible
2. Clicking the input opens a month picker showing all 12 months
3. Clicking a month updates the input field and closes the picker
4. The current month should be highlighted initially

API

@generates

/**
 * Initializes a month-only date picker on the specified input element
 *
 * @param {string|HTMLElement} selector - The input element or selector to attach the picker to
 * @returns {Object} The flatpickr instance
 */
function initMonthPicker(selector) {
  // Implementation here
}

module.exports = { initMonthPicker };