0

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?

Yakoffs
  • 17
  • 4
  • Shouldn't the end date of 'current month' and 'current quarter' be different, making them unique and selectable ranges? Might be easier to help if you provided your code for the date range picker – dgates82 Jul 26 '21 at 23:19
  • Actually the end dates are the same as well. Because the end date is today. There is nothing specific at the code actually, The issue reproduces in all the code variants. By the way, I use version 4.0.1 of ngx-daterangepicker-material – Yakoffs Jul 27 '21 at 07:08
  • How are the start and end dates of a month and a quarter possibly the same? Unless you mean "Quarter to Date" and "Month to Date"? – dgates82 Jul 27 '21 at 18:10
  • Yes, you right. I mean "Quarter to Date" and "Month to Date" – Yakoffs Jul 28 '21 at 11:37

1 Answers1

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

dgates82
  • 398
  • 3
  • 8
  • Thanks you! It helped me. I have a temporary solution, that is pretty ugly. I will open a new issue – Yakoffs Jul 30 '21 at 13:30