Skip to content

Dropdown year selector does not respect maxDate on end calendar #563

@ivanferrer

Description

@ivanferrer

Versions

Angular version: 15

Component version: ngx-daterangepicker-material v4.0.1

Describe the bug
When using the date range picker with showDropdowns enabled and setting [minDate] and [maxDate], the year dropdown still shows options outside of the defined range, especially in the second calendar (end date). Even though selection is blocked beyond the limits, the UI still allows the user to navigate and see invalid years.

To Reproduce
Steps to reproduce the behavior:
Set up <input ngxDaterangepickerMd> with [minDate]="moment('1900-01-01')" and [maxDate]="moment().add(5, 'years')"

Ensure showDropdowns is set to true

Click on the calendar input to open the picker

Use the dropdown to view the year selector on the second (end) calendar

Notice that it allows scrolling and selecting years beyond the maxDate

Expected behavior
The dropdown for selecting years (in both calendars) should be visually restricted to the range defined by minDate and maxDate, not just block selection after clicking.

Additional context

The issue affects user experience by allowing them to see and try to select invalid years.

This behavior can be confusing, especially when maxDate is dynamically set to current year + N.

A workaround using MutationObserver to patch the DOM manually is possible, but not ideal.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions