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

Question

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

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 请求使用唯一的范围标识符，而不是仅仅比较日期

或者导入项目源码修改为自己的目的

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

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

datepicker

bootstrap-datepicker

angular

ngx-daterangepicker-material