How to select different dates in date range with the same value in ngx-daterangepicker-material?

Question

I have two predefined date ranges with such values as 'Current Month' and 'Current Quarter'. Currently both ranges represent the same date value (because the quarter just started and the month as well). When I want to choose 'Current Quarter', it automatically chooses 'Current Month'. It's not possible to choose 'Current Quarter', the button isn't active. It doesn't look like a user friendly behavior. Is there any configurations to allow a user to select different date ranges with the same value?

Answer 1

Unfortunately, ngx-daterangepicker-material was not designed to allow multiple ranges with the exact same dates. I was able to recreate the symptoms you're seeing here: Stackblitz

And taking a look at the code for the package you're using, you'll see in the calculateChosenLabel() method:

    calculateChosenLabel () {
            if (!this.locale || !this.locale.separator) {
                this._buildLocale();
            }
            let customRange = true;
            let i = 0;
            if (this.rangesArray.length > 0) {
                for (const range in this.ranges) {
                    if (this.ranges[range]) {
                        if (this.timePicker) {
                            const format = this.timePickerSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
                            // ignore times when comparing dates if time picker seconds is not enabled
                          if (this.startDate.format(format) === this.ranges[range][0].format(format)
                            && this.endDate.format(format) === this.ranges[range][1].format(format)) {
                                customRange = false;
                                this.chosenRange = this.rangesArray[i];
                                break;
                            }
                        } else {
                            // ignore times when comparing dates if time picker is not enabled
                            if (this.startDate.format('YYYY-MM-DD') === this.ranges[range][0].format('YYYY-MM-DD')
                              && this.endDate.format('YYYY-MM-DD') === this.ranges[range][1].format('YYYY-MM-DD')) {
                                customRange = false;
                                this.chosenRange = this.rangesArray[i];
                                break;
                            }
                        }
                        i++;
                    }
                }

That 1. It loops through the Ranges you specify and matches the start and end dates that are selected against the Range.

And 2. It ignores time values unless you display the timepicker, so even trying to hack it with a time offset won't work

There are no flags or options to override this at this time.

It looks like your best options are to Open a new issue to request to utilize a unique range identifier, rather than just comparing dates

Or import the source code of the project and modify it for your own purposes