From b653d5894326538d11483af39b39b6491f5efce0 Mon Sep 17 00:00:00 2001 From: ypzhao Date: Wed, 28 Aug 2024 18:28:49 +0800 Subject: [PATCH] fix: range picker year disable --- .changeset/seven-elephants-nail.md | 5 +++ src/date-picker/calendar/header/component.ts | 26 ++++++++++------ .../calendar/panel/picker-panel.ts | 12 ++++--- .../disable-some-year.component.ts | 29 +++++++++++++++++ .../rangepicker/disable-some-year.stories.ts | 31 +++++++++++++++++++ 5 files changed, 89 insertions(+), 14 deletions(-) create mode 100644 .changeset/seven-elephants-nail.md create mode 100644 stories/rangepicker/disable-some-year.component.ts create mode 100644 stories/rangepicker/disable-some-year.stories.ts diff --git a/.changeset/seven-elephants-nail.md b/.changeset/seven-elephants-nail.md new file mode 100644 index 000000000..827e4c405 --- /dev/null +++ b/.changeset/seven-elephants-nail.md @@ -0,0 +1,5 @@ +--- +'@alauda/ui': patch +--- + +range picker year disable error diff --git a/src/date-picker/calendar/header/component.ts b/src/date-picker/calendar/header/component.ts index 9798019f4..729a05d10 100644 --- a/src/date-picker/calendar/header/component.ts +++ b/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 diff --git a/src/date-picker/calendar/panel/picker-panel.ts b/src/date-picker/calendar/panel/picker-panel.ts index 52201aa01..4fbddc557 100644 --- a/src/date-picker/calendar/panel/picker-panel.ts +++ b/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), ); } diff --git a/stories/rangepicker/disable-some-year.component.ts b/stories/rangepicker/disable-some-year.component.ts new file mode 100644 index 000000000..cf0df378b --- /dev/null +++ b/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: ` + +
+ 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, + }); +} diff --git a/stories/rangepicker/disable-some-year.stories.ts b/stories/rangepicker/disable-some-year.stories.ts new file mode 100644 index 000000000..cf5448535 --- /dev/null +++ b/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 = { + title: 'Example/RangePicker', + component: RangeDisableSomeYearComponent, + decorators: [ + moduleMetadata({ + declarations: [RangeDisableSomeYearComponent], + imports: [ + DatePickerModule, + FormsModule, + ReactiveFormsModule, + ButtonModule, + BrowserAnimationsModule, + ], + }), + ], +}; + +export default meta; +type Story = StoryObj; + +export const DisableSomeYear: Story = { + name: 'Disable some Year', +};