diff --git a/projects/kit/components/input-date-multi/input-date-multi.component.ts b/projects/kit/components/input-date-multi/input-date-multi.component.ts index 03213cc789da..c31793b45df7 100644 --- a/projects/kit/components/input-date-multi/input-date-multi.component.ts +++ b/projects/kit/components/input-date-multi/input-date-multi.component.ts @@ -33,6 +33,7 @@ import { tuiIsString, TuiMapper, TuiMonth, + TuiTypedMapper, } from '@taiga-ui/cdk'; import { TUI_DEFAULT_MARKER_HANDLER, @@ -191,6 +192,11 @@ export class TuiInputDateMultiComponent > = handler => stringifiable => tuiIsString(stringifiable) || handler(stringifiable.item); + readonly valueMapper: TuiTypedMapper< + [readonly TuiDay[]], + ReadonlyArray> + > = value => value.map(item => new TuiStringifiableItem(item, item => String(item))); + @HostBinding('attr.data-size') get size(): TuiSizeL | TuiSizeS { return this.textfieldSize.size; @@ -278,14 +284,14 @@ export class TuiInputDateMultiComponent this.done(); } - onValueChange(value: readonly TuiDay[]): void { + onValueChange(value: ReadonlyArray>): void { this.control?.updateValueAndValidity({emitEvent: false}); if (!value.length) { this.onOpenChange(true); } - this.value = value; + this.value = value.map(({item}) => item); } onDayClick(value: TuiDay): void { diff --git a/projects/kit/components/input-date-multi/input-date-multi.template.html b/projects/kit/components/input-date-multi/input-date-multi.template.html index 6499b75ade39..02732592d689 100644 --- a/projects/kit/components/input-date-multi/input-date-multi.template.html +++ b/projects/kit/components/input-date-multi/input-date-multi.template.html @@ -15,7 +15,7 @@ [inputHidden]="inputHidden" [maskito]="maskitoOptions" [nativeId]="nativeId" - [ngModel]="value" + [ngModel]="value | tuiMapper: valueMapper" [placeholder]="placeholder" [pseudoFocus]="pseudoFocus" [pseudoHover]="pseudoHover" @@ -23,7 +23,7 @@ [readOnly]="readOnly" [removable]="!nativeDropdownMode" [rows]="rows" - [tagValidator]="tagValidator" + [tagValidator]="tagValidator | tuiMapper: disabledItemHandlerWrapper" [tuiTextfieldFiller]="(filler$ | async) || ''" [tuiTextfieldIcon]="calendarIcon && iconContent" (keydown.enter)="onEnter(inputTag.search || '')"