tui-input-date Migration to latest taiga-ui

[vytautas-pranskunas-]

Later i had

<tui-input-date toNativeDate formControlName="receptionDate" />

with

import { Directive, Injectable } from '@angular/core';
import { TuiDay, TuiValueTransformer } from '@taiga-ui/cdk';
import { TUI_DATE_VALUE_TRANSFORMER } from '@taiga-ui/kit';

type From = TuiDay | null;

type To = Date | null;

@Injectable()
class NativeDateTransformer extends TuiValueTransformer<From, To> {
    public fromControlValue(controlValue: To): From {
        if (!controlValue) {
            return null;
        }

        if (!(controlValue instanceof Date)) {
            controlValue = new Date(controlValue);
        }

        return controlValue && TuiDay.fromLocalNativeDate(controlValue);
    }

    public toControlValue(componentValue: From): To {
        return componentValue?.toLocalNativeDate() || null;
    }
}

@Directive({
    standalone: true,
    selector: '[toNativeDate]',
    providers: [
        {
            provide: TUI_DATE_VALUE_TRANSFORMER,
            useClass: NativeDateTransformer,
        },
    ],
})
export class NativeDateTransformerDirective {}

with new syntax

<tui-textfield>
                    <input tuiInputDate toNativeDate formControlName="applicationDate" />
                    <tui-calendar *tuiTextfieldDropdown />
                </tui-textfield>

it does not seem to work out of the box. Any help would be appriciate

[waterplea]

In new Textfield based InputDate transformer is now part of the overall component DI options, change this:

    providers: [
        {
            provide: TUI_DATE_VALUE_TRANSFORMER,
            useClass: NativeDateTransformer,
        },
    ],

to this:

    providers: [tuiInputDateOptionsProviderNew({ valueTransformer: new NativeDateTransformer() })],