fix: range picker year disable (#580)

Co-authored-by: ypzhao <[email protected]>

.changeset/seven-elephants-nail.md

@@ -0,0 +1,5 @@
+---
+'@alauda/ui': patch
+---
+
+range picker year disable error

src/date-picker/calendar/header/component.ts

@@ -110,17 +110,23 @@ export class CalendarHeaderComponent {
     const availValue = (
       side === Side.Left ? this._minAvail : this._maxAvail
     )?.clone();
-    if (!availValue) {
-      return true;
+    /**
+     * 对于 range-picker
+     * 左侧部分 minAvail = minDate, maxAvail = min(maxData, rightAnchor)，从而左侧部分的按钮，仅在小于右侧部分时显示
+     * 右侧部分 maxAvail = maxDate, minAvail = max(minData, leftAnchor)，从而左侧部分的按钮，仅在小于右侧部分时显示
+     */
+    if (side === Side.Left) {
+      return type === DateNavRange.Month
+        ? !this.anchor.subtract(1, 'month').isBefore(availValue, 'month')
+        : type === DateNavRange.Year
+        ? !this.anchor.subtract(1, 'year').isBefore(availValue, 'year')
+        : false;
     }
-    // 对于年的判别，2014-5-1至2015-6-1日，仍当展示按钮
-    const constrainDate = [DateNavRange.Month, DateNavRange.Year].includes(type)
-      ? availValue.add(side === Side.Left ? 1 : -1, type as 'month' | 'year')
-      : availValue;
-    return (
-      this.compareNavValue(type, constrainDate, this.anchor) ===
-      (side === Side.Left ? -1 : 1)
-    );
+    return type === DateNavRange.Month
+      ? !this.anchor.add(1, 'month').isAfter(availValue, 'month')
+      : type === DateNavRange.Year
+      ? !this.anchor.add(1, 'year').isAfter(availValue, 'year')
+      : false;
   }
 
   // @return isBetween|isEqual:0, isBefore:-1,isAfter:1

src/date-picker/calendar/panel/picker-panel.ts

@@ -91,7 +91,11 @@ export class PickerPanelComponent implements OnChanges {
   get disabledDateFn() {
     return composeDisabledDateFn(
       date => this.minDate && date.isBefore(this.minDate, 'date'),
-      date => this.maxDate && date.isAfter(this.maxDate, 'date'),
+      (date, navRange) =>
+        this.maxDate &&
+        (navRange === DateNavRange.Decade
+          ? date.isAfter(this.maxDate, 'year')
+          : date.isAfter(this.maxDate, 'date')),
       this.disabledDate,
     );
   }
@@ -128,7 +132,7 @@ export class PickerPanelComponent implements OnChanges {
   }
 
   // 根据当前数据，计算渲染表格
-  // eslint-disable-next-line sonarjs/cognitive-complexity
+   
   renderPanelData(date: Dayjs, navRange: DateNavRange) {
     const value = [];
     let colCounts = 0;
@@ -199,8 +203,8 @@ export class PickerPanelComponent implements OnChanges {
       this.navRange === DateNavRange.Decade
         ? value.isSame(dateValue, YEAR)
         : this.navRange === DateNavRange.Year
-          ? value.isSame(dateValue, MONTH)
-          : value.isSame(dateValue, DAY),
+        ? value.isSame(dateValue, MONTH)
+        : value.isSame(dateValue, DAY),
     );
   }
 

stories/rangepicker/disable-some-year.component.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import dayjs from 'dayjs';
+
+@Component({
+  template: `
+    <aui-range-picker
+      [(ngModel)]="range"
+      [showTime]="false"
+      [maxDate]="maxDate"
+      [minDate]="minDate"
+    ></aui-range-picker>
+    <br />
+    Form value: {{ control?.value | json }}
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RangeDisableSomeYearComponent {
+  range = [dayjs(), dayjs()];
+
+  minDate = dayjs().subtract(1, 'year');
+
+  maxDate = dayjs();
+
+  control = new FormControl({
+    value: [dayjs(), dayjs().add(3, 'day')],
+    disabled: true,
+  });
+}

stories/rangepicker/disable-some-year.stories.ts

@@ -0,0 +1,31 @@
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+
+import { RangeDisableSomeYearComponent } from './disable-some-year.component';
+
+import { ButtonModule, DatePickerModule } from '@alauda/ui';
+
+const meta: Meta<RangeDisableSomeYearComponent> = {
+  title: 'Example/RangePicker',
+  component: RangeDisableSomeYearComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [RangeDisableSomeYearComponent],
+      imports: [
+        DatePickerModule,
+        FormsModule,
+        ReactiveFormsModule,
+        ButtonModule,
+        BrowserAnimationsModule,
+      ],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<RangeDisableSomeYearComponent>;
+
+export const DisableSomeYear: Story = {
+  name: 'Disable some Year',
+};