-
-
Notifications
You must be signed in to change notification settings - Fork 262
Description
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.