From 159e27f064bf6774d701cd2f4c7cbe1327ea9682 Mon Sep 17 00:00:00 2001 From: Haoxin Yang <1810849666@qq.com> Date: Tue, 15 Aug 2023 11:52:55 +0800 Subject: [PATCH 1/2] fix: date pick range disable --- .../calendar/date-picker-panel/component.ts | 111 +++++++++++++++++- .../calendar/date-picker-panel/template.html | 3 +- .../calendar/panel/picker-panel.ts | 20 +++- src/time-picker/component.ts | 46 +++++++- src/time-picker/panel/panel.component.ts | 100 +++++++++++----- stories/date-picker/basic.component.ts | 13 ++ stories/date-picker/with-time.component.ts | 18 ++- 7 files changed, 272 insertions(+), 39 deletions(-) diff --git a/src/date-picker/calendar/date-picker-panel/component.ts b/src/date-picker/calendar/date-picker-panel/component.ts index 60e85d7db..b9a6083ef 100644 --- a/src/date-picker/calendar/date-picker-panel/component.ts +++ b/src/date-picker/calendar/date-picker-panel/component.ts @@ -23,6 +23,7 @@ import { updateDate, updateDateByTimeModel, } from '../util'; +import { HOUR_ITEMS, MINUTE_ITEMS, SECOND_ITEMS } from 'src/time-picker'; @Component({ selector: 'aui-date-picker-panel', @@ -57,6 +58,17 @@ export class DatePickerPanelComponent extends CommonFormControl { private _type: DatePickerType; + @Input() + set selectedTime(time: TimePickerModel) { + this._selectedTime = time; + } + + get selectedTime() { + return this._selectedTime; + } + + private _selectedTime: TimePickerModel; + @Input() showTime = false; @@ -98,7 +110,10 @@ export class DatePickerPanelComponent extends CommonFormControl { type: keyof ReturnType, ) { if (selectedDate !== this._cacheSelectedDate) { - this._cacheDisabledTimeFn = this.disabledTime(selectedDate); + this._cacheDisabledTimeFn = combineDisabledTimeFn( + this._disabledTimeFn.bind(this), + this.disabledTime, + )(selectedDate); this._cacheSelectedDate = selectedDate; } return this._cacheDisabledTimeFn?.[type]; @@ -114,8 +129,6 @@ export class DatePickerPanelComponent extends CommonFormControl { selectedDate: Dayjs; - selectedTime: TimePickerModel; - DateNavRange = DateNavRange; DatePickerType = DatePickerType; @@ -159,11 +172,103 @@ export class DatePickerPanelComponent extends CommonFormControl { if (!this.selectedDate) { return; } + this.selectedDate = updateDateByTimeModel(this.selectedDate, time); this.emitValue(this.selectedDate); } + clearValue() { + this.selectedTime = null; + this.clear.next(); + } + setToday() { this.confirmValue(dayjs(), true); } + + private _disabledTimeFn(selectedDate: ConfigType) { + const returnFnMap: Record< + keyof ReturnType, + () => number[] + > = { + hours: () => [], + minutes: () => [], + seconds: () => [], + }; + + if ( + selectedDate && + this.minDate && + (selectedDate as Dayjs)?.isSame(this.minDate, 'day') + ) { + returnFnMap.hours = () => + HOUR_ITEMS.filter(item => item < this.minDate.hour()); + returnFnMap.minutes = (hour?: number) => { + if (hour === this.minDate.hour()) { + return MINUTE_ITEMS.filter(item => item < this.minDate.minute()); + } + return []; + }; + returnFnMap.seconds = (hour?: number, minute?: number) => { + if (hour === this.minDate.hour() && minute === this.minDate.minute()) { + return SECOND_ITEMS.filter(item => item < this.minDate.second()); + } + return []; + }; + } + + if ( + selectedDate && + this.maxDate && + (selectedDate as Dayjs)?.isSame(this.maxDate, 'day') + ) { + returnFnMap.hours = () => + HOUR_ITEMS.filter(item => item > this.maxDate.hour()); + returnFnMap.minutes = (hour?: number) => { + if (hour === this.maxDate.hour()) { + return MINUTE_ITEMS.filter(item => item > this.maxDate.minute()); + } + return []; + }; + returnFnMap.seconds = (hour?: number, minute?: number) => { + if (hour === this.maxDate.hour() && minute === this.maxDate.minute()) { + return SECOND_ITEMS.filter(item => item > this.maxDate.second()); + } + return []; + }; + } + + return returnFnMap; + } +} + +function combineDisabledTimeFn( + ...disabledFnList: DisabledTimeFn[] +): DisabledTimeFn { + return (date?: ConfigType) => ({ + hours: () => + Array.from( + new Set( + disabledFnList + .map(fn => fn(date)?.hours?.() || []) + .reduce((prev, cur) => [...prev, ...cur], []), + ), + ), + minutes: (hour?: number) => + Array.from( + new Set( + disabledFnList + .map(fn => fn(date)?.minutes?.(hour) || []) + .reduce((prev, cur) => [...prev, ...cur], []), + ), + ), + seconds: (hour?: number, minute?: number) => + Array.from( + new Set( + disabledFnList + .map(fn => fn(date)?.seconds?.(hour, minute) || []) + .reduce((prev, cur) => [...prev, ...cur], []), + ), + ), + }); } diff --git a/src/date-picker/calendar/date-picker-panel/template.html b/src/date-picker/calendar/date-picker-panel/template.html index a845e4c11..ca22fde21 100644 --- a/src/date-picker/calendar/date-picker-panel/template.html +++ b/src/date-picker/calendar/date-picker-panel/template.html @@ -17,6 +17,7 @@ [weekStartDay]="weekStartDay" [minDate]="minDate" [maxDate]="maxDate" + [selectedTime]="selectedTime" [type]="type" [matchDates]="[selectedDate]" (select)="panelValueChange($event)" @@ -30,7 +31,7 @@ this.minDate && date.isBefore(this.minDate), - date => this.maxDate && date.isAfter(this.maxDate), + date => + this.minDate && + date + .set('hour', this.selectedTime?.hour || 23) + .set('minute', this.selectedTime?.minute || 59) + .set('second', this.selectedTime?.second || 59) + .isBefore(this.minDate), + date => + this.maxDate && + date + .set('hour', this.selectedTime?.hour || 0) + .set('minute', this.selectedTime?.minute || 0) + .set('second', this.selectedTime?.second || 0) + .isAfter(this.maxDate), this.disabledDate, ); } diff --git a/src/time-picker/component.ts b/src/time-picker/component.ts index 1364826a4..65bb914b0 100644 --- a/src/time-picker/component.ts +++ b/src/time-picker/component.ts @@ -23,6 +23,7 @@ import { TimePickerModel, isTimePickerModel, } from './time-picker.type'; +import { HOUR_ITEMS, MINUTE_ITEMS, SECOND_ITEMS } from './constant'; dayjs.extend(customParseFormat); @@ -93,7 +94,6 @@ export class TimePickerComponent extends CommonFormControl< timeFormatValue = ''; override writeValue(value: TimePickerDataLike) { - super.writeValue(value); if (!value) { return this.setValue(null); } @@ -104,7 +104,9 @@ export class TimePickerComponent extends CommonFormControl< result = dayjs(value); this.submit(false, result); } - this.setValue(result); + const validResult = this.validResult(result); + this.setValue(validResult); + super.writeValue(validResult); } setValue(value: Dayjs) { @@ -195,4 +197,44 @@ export class TimePickerComponent extends CommonFormControl< this.closePanel(); } } + + private validResult(result: Dayjs) { + const validHours = this.validHours(); + result = result.set( + 'hour', + validHours.includes(result.hour()) ? result.hour() : validHours[0], + ); + + const validMinutes = this.validMinutes(result.hour()); + result = result.set( + 'minute', + validMinutes.includes(result.minute()) + ? result.minute() + : validMinutes[0], + ); + + const validSeconds = this.validSeconds(result.hour(), result.minute()); + result = result.set( + 'second', + validSeconds.includes(result.second()) + ? result.second() + : validSeconds[0], + ); + return result; + } + + private validHours() { + const disabledHours = this.disableHours?.() || []; + return HOUR_ITEMS.filter(hour => !disabledHours.includes(hour)); + } + + private validMinutes(hour: number) { + const disabledMinutes = this.disableMinutes?.(hour) || []; + return MINUTE_ITEMS.filter(minute => !disabledMinutes.includes(minute)); + } + + private validSeconds(hour: number, minute: number) { + const disabledSeconds = this.disableSeconds?.(hour, minute) || []; + return SECOND_ITEMS.filter(second => !disabledSeconds.includes(second)); + } } diff --git a/src/time-picker/panel/panel.component.ts b/src/time-picker/panel/panel.component.ts index 571026228..21a4e883e 100644 --- a/src/time-picker/panel/panel.component.ts +++ b/src/time-picker/panel/panel.component.ts @@ -197,10 +197,12 @@ export class TimePickerPanelComponent if (!type) { return; } - const result = ( - currentValue || - updateDateByTimeModel(dayjs(), { hour: 0, minute: 0, second: 0 }) - ).set(type, value); + const result = this.validResult( + ( + currentValue || + updateDateByTimeModel(dayjs(), { hour: 0, minute: 0, second: 0 }) + ).set(type, value), + ); this.emitModel(result); return result; } @@ -243,6 +245,71 @@ export class TimePickerPanelComponent } } + matchValue( + value: number, + type: TimePickerControlType, + currDate: Dayjs, + ): boolean { + return currDate?.get(type) === value; + } + + getControlTypeConfig(type: TimePickerControlType): number[] { + return { + [TimePickerControlType.Hour]: this.HOUR_ITEM_CONFIG, + [TimePickerControlType.Minute]: this.MINUTE_ITEM_CONFIG, + [TimePickerControlType.Second]: this.SECOND_ITEM_CONFIG, + }[type]; + } + + selectNow() { + this.firstScrolled = true; + this.emitModel(this.validResult(dayjs())); + } + + trackBy(_index: number, content: number) { + return content; + } + + private validResult(result: Dayjs) { + const validHours = this.validHours(); + result = result.set( + 'hour', + validHours.includes(result.hour()) ? result.hour() : validHours[0], + ); + + const validMinutes = this.validMinutes(result.hour()); + result = result.set( + 'minute', + validMinutes.includes(result.minute()) + ? result.minute() + : validMinutes[0], + ); + + const validSeconds = this.validSeconds(result.hour(), result.minute()); + result = result.set( + 'second', + validSeconds.includes(result.second()) + ? result.second() + : validSeconds[0], + ); + return result; + } + + private validHours() { + const disabledHours = this.disableHours?.() || []; + return HOUR_ITEMS.filter(hour => !disabledHours.includes(hour)); + } + + private validMinutes(hour: number) { + const disabledMinutes = this.disableMinutes?.(hour) || []; + return MINUTE_ITEMS.filter(minute => !disabledMinutes.includes(minute)); + } + + private validSeconds(hour: number, minute: number) { + const disabledSeconds = this.disableSeconds?.(hour, minute) || []; + return SECOND_ITEMS.filter(second => !disabledSeconds.includes(second)); + } + private scrollByValue( element: HTMLElement, value: number, @@ -270,29 +337,4 @@ export class TimePickerPanelComponent }); } } - - matchValue( - value: number, - type: TimePickerControlType, - currDate: Dayjs, - ): boolean { - return currDate?.get(type) === value; - } - - getControlTypeConfig(type: TimePickerControlType): number[] { - return { - [TimePickerControlType.Hour]: this.HOUR_ITEM_CONFIG, - [TimePickerControlType.Minute]: this.MINUTE_ITEM_CONFIG, - [TimePickerControlType.Second]: this.SECOND_ITEM_CONFIG, - }[type]; - } - - selectNow() { - this.firstScrolled = true; - this.emitModel(dayjs()); - } - - trackBy(_index: number, content: number) { - return content; - } } diff --git a/stories/date-picker/basic.component.ts b/stories/date-picker/basic.component.ts index b9eeb4cdf..3c597054e 100644 --- a/stories/date-picker/basic.component.ts +++ b/stories/date-picker/basic.component.ts @@ -13,6 +13,8 @@ import { DatePickerType } from '@alauda/ui'; placeholder="请选择" [weekStartDay]="2" [disabled]="disabled" + [minDate]="minDate" + [maxDate]="maxDate" required >
@@ -27,4 +29,15 @@ export default class DatePickerBasicComponent { now = dayjs(); time = dayjs().add(7, 'day'); DatePickerType = DatePickerType; + + minDate = dayjs() + .subtract(7, 'day') + .set('hour', 12) + .set('minute', 32) + .set('second', 12); +maxDate = dayjs() + .add(7, 'day') + .set('hour', 17) + .set('minute', 46) + .set('second', 25); } diff --git a/stories/date-picker/with-time.component.ts b/stories/date-picker/with-time.component.ts index 60d08867a..5a73d840f 100644 --- a/stories/date-picker/with-time.component.ts +++ b/stories/date-picker/with-time.component.ts @@ -1,5 +1,5 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { Dayjs } from 'dayjs'; +import dayjs, { Dayjs } from 'dayjs'; import { DatePickerType } from '@alauda/ui'; @@ -7,16 +7,30 @@ import { DatePickerType } from '@alauda/ui'; template: `
Form value: {{ time?.toDate() }} +
{{ minDate }}
+
{{ maxDate }}
`, changeDetection: ChangeDetectionStrategy.OnPush, }) export default class DatePickerWithTimeComponent { time: Dayjs = null; DatePickerType = DatePickerType; + + minDate = dayjs() + .subtract(7, 'day') + .set('hour', 12) + .set('minute', 32) + .set('second', 12); + maxDate = dayjs() + .add(7, 'day') + .set('hour', 17) + .set('minute', 46) + .set('second', 25); } From 2bedcc6b0e551ec76ddd3e111d7a6a68314c225a Mon Sep 17 00:00:00 2001 From: Haoxin Yang <1810849666@qq.com> Date: Tue, 29 Aug 2023 16:05:19 +0800 Subject: [PATCH 2/2] feat: optimize valid result --- src/time-picker/component.ts | 78 +++++++------------ src/time-picker/panel/panel.component.ts | 69 ++++++---------- src/time-picker/util.ts | 69 ++++++++++++++++ stories/date-picker/basic.component.ts | 11 --- stories/date-picker/date-picker.mdx | 7 ++ .../with-max-min-date.component.ts | 44 +++++++++++ .../date-picker/with-max-min-date.stories.ts | 30 +++++++ 7 files changed, 205 insertions(+), 103 deletions(-) create mode 100644 src/time-picker/util.ts create mode 100644 stories/date-picker/with-max-min-date.component.ts create mode 100644 stories/date-picker/with-max-min-date.stories.ts diff --git a/src/time-picker/component.ts b/src/time-picker/component.ts index 65bb914b0..83299ae49 100644 --- a/src/time-picker/component.ts +++ b/src/time-picker/component.ts @@ -3,7 +3,9 @@ import { Component, EventEmitter, Input, + OnChanges, Output, + SimpleChanges, TemplateRef, ViewChild, ViewEncapsulation, @@ -23,7 +25,7 @@ import { TimePickerModel, isTimePickerModel, } from './time-picker.type'; -import { HOUR_ITEMS, MINUTE_ITEMS, SECOND_ITEMS } from './constant'; +import { validResult } from './util'; dayjs.extend(customParseFormat); @@ -41,10 +43,10 @@ dayjs.extend(customParseFormat); }, ], }) -export class TimePickerComponent extends CommonFormControl< - TimePickerDataLike, - TimePickerModel -> { +export class TimePickerComponent + extends CommonFormControl + implements OnChanges +{ @Input() format = 'HH:mm:ss'; @@ -61,13 +63,13 @@ export class TimePickerComponent extends CommonFormControl< showIcon = true; @Input() - disableHours: () => number[]; + disableHours?: () => number[]; @Input() - disableMinutes: (hour?: number) => number[]; + disableMinutes?: (hour?: number) => number[]; @Input() - disableSeconds: (hour?: number, minute?: number) => number[]; + disableSeconds?: (hour?: number, minute?: number) => number[]; @Input() hourStep = 1; @@ -93,6 +95,12 @@ export class TimePickerComponent extends CommonFormControl< timeValue: Dayjs = null; timeFormatValue = ''; + private validResult = validResult({ + hours: this.disableHours, + minutes: this.disableMinutes, + seconds: this.disableSeconds, + }); + override writeValue(value: TimePickerDataLike) { if (!value) { return this.setValue(null); @@ -109,6 +117,20 @@ export class TimePickerComponent extends CommonFormControl< super.writeValue(validResult); } + ngOnChanges({ disableHours, disableMinutes, disableSeconds }: SimpleChanges) { + if ( + this.disableHours !== disableHours?.currentValue || + this.disableMinutes !== disableMinutes?.currentValue || + this.disableSeconds !== disableSeconds?.currentValue + ) { + this.validResult = validResult({ + hours: disableHours?.currentValue, + minutes: disableMinutes?.currentValue, + seconds: disableSeconds?.currentValue, + }); + } + } + setValue(value: Dayjs) { this.timeValue = value; this.timeFormatValue = value ? dayjs(value).format(this.format) : null; @@ -197,44 +219,4 @@ export class TimePickerComponent extends CommonFormControl< this.closePanel(); } } - - private validResult(result: Dayjs) { - const validHours = this.validHours(); - result = result.set( - 'hour', - validHours.includes(result.hour()) ? result.hour() : validHours[0], - ); - - const validMinutes = this.validMinutes(result.hour()); - result = result.set( - 'minute', - validMinutes.includes(result.minute()) - ? result.minute() - : validMinutes[0], - ); - - const validSeconds = this.validSeconds(result.hour(), result.minute()); - result = result.set( - 'second', - validSeconds.includes(result.second()) - ? result.second() - : validSeconds[0], - ); - return result; - } - - private validHours() { - const disabledHours = this.disableHours?.() || []; - return HOUR_ITEMS.filter(hour => !disabledHours.includes(hour)); - } - - private validMinutes(hour: number) { - const disabledMinutes = this.disableMinutes?.(hour) || []; - return MINUTE_ITEMS.filter(minute => !disabledMinutes.includes(minute)); - } - - private validSeconds(hour: number, minute: number) { - const disabledSeconds = this.disableSeconds?.(hour, minute) || []; - return SECOND_ITEMS.filter(second => !disabledSeconds.includes(second)); - } } diff --git a/src/time-picker/panel/panel.component.ts b/src/time-picker/panel/panel.component.ts index 21a4e883e..e7a46ff66 100644 --- a/src/time-picker/panel/panel.component.ts +++ b/src/time-picker/panel/panel.component.ts @@ -28,6 +28,7 @@ import { SECOND_ITEMS, } from '../constant'; import { TimePickerControlType } from '../time-picker.type'; +import { validResult } from '../util'; const TIME_PICKER_COLUMN_WIDTH = 80; const bem = buildBem('aui-time-picker-panel'); @@ -96,13 +97,13 @@ export class TimePickerPanelComponent confirm = new EventEmitter(); @Input() - disableHours: () => number[]; + disableHours?: () => number[]; @Input() - disableMinutes: (hour?: number) => number[]; + disableMinutes?: (hour?: number) => number[]; @Input() - disableSeconds: (hour?: number, minute?: number) => number[]; + disableSeconds?: (hour?: number, minute?: number) => number[]; hourEnabled: boolean; minuteEnabled: boolean; @@ -131,6 +132,12 @@ export class TimePickerPanelComponent // 用于控制初次滚动，是否展示滚动动画效果 firstScrolled = false; + private validResult = validResult({ + hours: this.disableHours, + minutes: this.disableMinutes, + seconds: this.disableSeconds, + }); + constructor(protected override cdr: ChangeDetectorRef) { super(cdr); this.model$.subscribe(_ => { @@ -160,7 +167,21 @@ export class TimePickerPanelComponent } } - ngOnChanges({ hourStep, minuteStep, secondStep }: SimpleChanges): void { + ngOnChanges({ + hourStep, + minuteStep, + secondStep, + disableHours, + disableMinutes, + disableSeconds, + }: SimpleChanges): void { + if (disableHours || disableMinutes || disableSeconds) { + this.validResult = validResult({ + hours: disableHours?.currentValue, + minutes: disableMinutes?.currentValue, + seconds: disableSeconds?.currentValue, + }); + } if (hourStep?.currentValue > 0) { this.HOUR_ITEM_CONFIG = HOUR_ITEMS.filter( i => i % hourStep.currentValue === 0, @@ -270,46 +291,6 @@ export class TimePickerPanelComponent return content; } - private validResult(result: Dayjs) { - const validHours = this.validHours(); - result = result.set( - 'hour', - validHours.includes(result.hour()) ? result.hour() : validHours[0], - ); - - const validMinutes = this.validMinutes(result.hour()); - result = result.set( - 'minute', - validMinutes.includes(result.minute()) - ? result.minute() - : validMinutes[0], - ); - - const validSeconds = this.validSeconds(result.hour(), result.minute()); - result = result.set( - 'second', - validSeconds.includes(result.second()) - ? result.second() - : validSeconds[0], - ); - return result; - } - - private validHours() { - const disabledHours = this.disableHours?.() || []; - return HOUR_ITEMS.filter(hour => !disabledHours.includes(hour)); - } - - private validMinutes(hour: number) { - const disabledMinutes = this.disableMinutes?.(hour) || []; - return MINUTE_ITEMS.filter(minute => !disabledMinutes.includes(minute)); - } - - private validSeconds(hour: number, minute: number) { - const disabledSeconds = this.disableSeconds?.(hour, minute) || []; - return SECOND_ITEMS.filter(second => !disabledSeconds.includes(second)); - } - private scrollByValue( element: HTMLElement, value: number, diff --git a/src/time-picker/util.ts b/src/time-picker/util.ts new file mode 100644 index 000000000..1bba87f48 --- /dev/null +++ b/src/time-picker/util.ts @@ -0,0 +1,69 @@ +import { Dayjs } from 'dayjs'; +import { HOUR_ITEMS, MINUTE_ITEMS, SECOND_ITEMS } from './constant'; + +function compose(...fns: Array<(arg: T) => T>): (arg: T) => T { + return (x: T) => fns.reduceRight((acc, fn) => fn(acc), x); +} + +function closestTo(num: number) { + return (prev: number, curr: number) => + Math.abs(curr - num) < Math.abs(prev - num) ? curr : prev; +} + +function validHoursFn(disableHours?: () => number[]) { + const disabledHours = disableHours?.() || []; + const validHours = HOUR_ITEMS.filter(hour => !disabledHours.includes(hour)); + return (result: Dayjs) => + result.set( + 'hour', + validHours.includes(result.hour()) + ? result.hour() + : validHours.reduce(closestTo(result.hour()), validHours[0]), + ); +} + +function validMinutesFn(disableMinutes?: (hour?: number) => number[]) { + return (result: Dayjs) => { + const disabledMinutes = disableMinutes?.(result.hour()) || []; + const validMinutes = MINUTE_ITEMS.filter( + minute => !disabledMinutes.includes(minute), + ); + return result.set( + 'minute', + validMinutes.includes(result.minute()) + ? result.minute() + : validMinutes.reduce(closestTo(result.minute()), validMinutes[0]), + ); + }; +} + +function validSecondsFn( + disableSeconds?: (hour?: number, minute?: number) => number[], +) { + return (result: Dayjs) => { + const disabledSeconds = + disableSeconds?.(result.hour(), result.minute()) || []; + const validSeconds = SECOND_ITEMS.filter( + second => !disabledSeconds.includes(second), + ); + return result.set( + 'second', + validSeconds.includes(result.second()) + ? result.second() + : validSeconds.reduce(closestTo(result.second()), validSeconds[0]), + ); + }; +} + +export function validResult(disabledTimeFn: { + hours?: () => number[]; + minutes?: (hour?: number) => number[]; + seconds?: (hour?: number, minute?: number) => number[]; +}) { + const validResultFn = compose( + validSecondsFn(disabledTimeFn?.seconds), + validMinutesFn(disabledTimeFn?.minutes), + validHoursFn(disabledTimeFn?.hours), + ); + return (result: Dayjs) => validResultFn(result); +} diff --git a/stories/date-picker/basic.component.ts b/stories/date-picker/basic.component.ts index 3c597054e..d51f829b9 100644 --- a/stories/date-picker/basic.component.ts +++ b/stories/date-picker/basic.component.ts @@ -29,15 +29,4 @@ export default class DatePickerBasicComponent { now = dayjs(); time = dayjs().add(7, 'day'); DatePickerType = DatePickerType; - - minDate = dayjs() - .subtract(7, 'day') - .set('hour', 12) - .set('minute', 32) - .set('second', 12); -maxDate = dayjs() - .add(7, 'day') - .set('hour', 17) - .set('minute', 46) - .set('second', 25); } diff --git a/stories/date-picker/date-picker.mdx b/stories/date-picker/date-picker.mdx index 44566dbab..eaaf457ee 100644 --- a/stories/date-picker/date-picker.mdx +++ b/stories/date-picker/date-picker.mdx @@ -6,6 +6,7 @@ import * as month from './month.stories'; import * as today from './today.stories'; import * as withTime from './with-time.stories'; import * as year from './year.stories'; +import * as WithMaxMinDate from './with-max-min-date.stories' @@ -47,6 +48,12 @@ import * as year from './year.stories'; meta={year} > + + + ## DatePicker Inputs | 名称 | 类型 | 默认值 | 描述 | diff --git a/stories/date-picker/with-max-min-date.component.ts b/stories/date-picker/with-max-min-date.component.ts new file mode 100644 index 000000000..217e294d6 --- /dev/null +++ b/stories/date-picker/with-max-min-date.component.ts @@ -0,0 +1,44 @@ +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; +import dayjs from 'dayjs'; + +import { DatePickerType } from '@alauda/ui'; + +@Component({ + selector: 'story-date-picker-with-max-min-date', + template: ` + +
+ Form value: {{ time?.toDate() }} + `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export default class DatePickerWithMaxAndMinComponent { + @Input() + disabled = false; + + now = dayjs(); + time = dayjs().add(7, 'day'); + DatePickerType = DatePickerType; + + minDate = dayjs() + .subtract(7, 'day') + .set('hour', 12) + .set('minute', 32) + .set('second', 12); +maxDate = dayjs() + .add(7, 'day') + .set('hour', 17) + .set('minute', 46) + .set('second', 25); +} diff --git a/stories/date-picker/with-max-min-date.stories.ts b/stories/date-picker/with-max-min-date.stories.ts new file mode 100644 index 000000000..c531fb585 --- /dev/null +++ b/stories/date-picker/with-max-min-date.stories.ts @@ -0,0 +1,30 @@ +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { Meta, StoryObj, moduleMetadata } from '@storybook/angular'; + +import { ButtonModule, DatePickerModule } from '@alauda/ui'; +import DatePickerWithMaxAndMinComponent from './with-max-min-date.component'; + +const meta: Meta = { + title: 'Example/DatePicker', + component: DatePickerWithMaxAndMinComponent, + decorators: [ + moduleMetadata({ + declarations: [DatePickerWithMaxAndMinComponent], + imports: [ + DatePickerModule, + FormsModule, + ReactiveFormsModule, + ButtonModule, + BrowserAnimationsModule, + ], + }), + ], +}; + +export default meta; +type Story = StoryObj; + +export const WithMaxMinDate: Story = { + name: 'Date Picker With Max and Min Date', +};