如何在 ngx-daterangepicker-material 中选择具有相同值的日期范围内的不同日期？

Question

我有两个预定义的日期范围，其中包含“当前月份”和“当前季度”等值。目前，这两个范围代表相同的日期值（因为刚刚开始的季度和月份也是如此）。当我想选择“当前季度”时，它会自动选择“当前月份”。无法选择“当前季度”，该按钮未激活。 它看起来不像是用户友好的行为。 是否有任何配置允许用户选择具有相同值的不同日期范围？

Answer 1

不幸的是，ngx-daterangepicker-material 的设计目的不是允许具有完全相同日期的多个范围。我能够重现您在此处看到的症状： Stackblitz

看看你正在使用的包的代码，你会在 calculateChosenLabel() 方法中看到：

    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++;
                    }
                }

那 1. 它遍历您指定的范围，并匹配针对范围选择的开始日期和结束日期。

而且 2. 除非您显示时间选择器，否则它会忽略时间值，因此即使尝试使用时间偏移来破解它也行不通

目前没有标志或选项可以覆盖它。

看起来您最好的选择是 Open a new issue 请求使用唯一的范围标识符，而不仅仅是比较日期

或者导入项目的源代码，根据自己的目的进行修改