Add Month Range Picker Feature

[hatimmakki]

This PR adds a month range picker feature to the daterangepicker library.

Changes:

• Added isMonthRange option to enable month-only selection
• Modified calendar rendering to show month/year selection when in month range mode
• Updated month navigation logic for month range picker
• Maintained backward compatibility with existing day picker functionality

Usage:

.daterangepicker({
    isMonthRange: true,
    locale: {
        format: 'MM/YYYY'
    }
});

This feature allows users to select month ranges instead of specific dates, which is useful for reporting, analytics, and other use cases where month-level granularity is preferred.

[Copilot]

Pull Request Overview

This PR adds a month-range selection mode to the existing date range picker, enabling users to pick entire months instead of specific dates while maintaining all current day-picker functionality.

• Introduces an isMonthRange option and demo checkbox to toggle month-only mode.
• Extends calendar rendering and navigation methods to support month grids and year-based navigation.
• Adds CSS styling for the month-picker table and range highlighting.

Reviewed Changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 2 comments.

File	Description
demo.html	Added isMonthRange checkbox and demo configuration handling.
daterangepicker.js	Introduced isMonthRange flag, month-range rendering, navigation, and selection logic.
daterangepicker.css	Defined styles for the month-picker table, hover, disabled, and range states.

Comments suppressed due to low confidence (2)

daterangepicker.js:57

• New isMonthRange option and its calendar logic lack accompanying unit tests. Consider adding tests for month-range rendering, navigation, and selection behaviors to ensure coverage.

        this.isMonthRange = false;

demo.html:146

• [nitpick] The label isMonthRange may not be user-friendly in the demo. Consider changing it to a more descriptive phrase like “Enable month-range selection.”

                  <input type="checkbox" id="isMonthRange"> isMonthRange

[Copilot]

The special-case branch for selecting the same month is unreachable because the previous if already handles startOfMonth.isBefore(this.startDate). Consider checking for equality (isSame) or reordering conditions to correctly detect clicking the same start/end month.

Suggested change

	} else if (!this.endDate && startOfMonth.isBefore(this.startDate, 'month')) {
	} else if (!this.endDate && startOfMonth.isSame(this.startDate, 'month')) {

[Copilot]

[nitpick] The renderMonthCalendar method is large and duplicates parts of renderCalendar. Refactor shared header and grid-generation logic into helper functions to reduce duplication and improve readability.

Suggested change

	renderMonthCalendar: function(side) {
	var calendar = side == 'left' ? this.leftCalendar : this.rightCalendar;
	var year = calendar.month.year();
	var minDate = side == 'left' ? this.minDate : this.startDate;
	var maxDate = this.maxDate;
	var html = '<table class="table-condensed month-picker">';
	html += '<thead>';
	generateCalendarHeader: function(year, minDate, maxDate, side) {
	var html = '<thead>';

[maricavor]

The problem that in month-only mode the plugin uses a different calendar structure and never sets leftCalendar.calendar / rightCalendar.calendar, but hoverDate still tried to read calendar[row][col].
An early return was added for month mode so the hover logic is skipped. That’s fine for the month picker, since it’s single-date selection and doesn’t need range hover highlighting.

hoverDate: function(e) {
    //ignore dates that can't be selected
    if (!$(e.target).hasClass('available')) return;

    // Month range mode uses a different calendar structure; skip hover logic
    if (this.isMonthRange) return;

    ...