input-month

[vytautas-pranskunas-]

I am trying to use tuiInputMonth and was strugling a bit with it. Do not understand why you had to introduce TuiMonth type?
I mean my task is according to code show either nomral date picker or month picker. I think that both controls should work on same Date input just picker should not show days. Output should be YYYY.MM.01 for example.
However i was trying to do something like this:

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

type From = TuiMonth | null;

type To = Date | null;

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

        if (!(controlValue instanceof Date)) {
            controlValue = new Date(controlValue);
        }
        const year = controlValue.getFullYear();
        const month = controlValue.getMonth();

        return controlValue && new TuiMonth(year, month);
    }

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

@Directive({
    standalone: true,
    selector: 'input[tuiInputMonth][toNativeMonth]',
    providers: [
        {
            provide: TUI_DATE_VALUE_TRANSFORMER,
            useClass: NativeMonthTransformer,
        },
    ],
})
export class NativeMonthTransformerDirective {}

with usage

 <tui-textfield>
                            <input tuiInputMonth toNativeMonth formControlName="dateFrom" />
                            <tui-calendar-month *tuiTextfieldDropdown />
                        </tui-textfield>

but for some reason it doe snot react. Maybe it is because of: provide: TUI_DATE_VALUE_TRANSFORMER,

any help would be appriated :)

[vytautas-pranskunas-]

ok i have created two directives and transformer service base on nativeDateTransformer.. but it looks like TUI_DATE_VALUE_TRANSFORMER is not used by tuiInputMonth because fromControlValue(controlValue: To){... is never called

here is the code please advice what to do...

import { Directive } from '@angular/core';
import { TUI_DATE_VALUE_TRANSFORMER } from '@taiga-ui/kit';
import { NativeDateTransformerService } from '@infrastructure/services/native-date-transformer.service';

@Directive({
    standalone: true,
    selector: 'tui-input-date[toNativeDate]',
    providers: [
        {
            provide: TUI_DATE_VALUE_TRANSFORMER,
            useFactory: () => {
                return new NativeDateTransformerService('day');
            },
        },
    ],
})
export class NativeDateTransformerDirective {}

import { Directive } from '@angular/core';
import { NativeDateTransformerService } from '@infrastructure/services/native-date-transformer.service';
import { TUI_DATE_VALUE_TRANSFORMER } from '@taiga-ui/kit';

@Directive({
    standalone: true,
    selector: 'input[toNativeMonth]',
    providers: [
        {
            provide: TUI_DATE_VALUE_TRANSFORMER,
            useFactory: () => {
                return new NativeDateTransformerService('month');
            },
        },
    ],
})
export class NativeMonthTransformerDirective {}

import { TuiDay, TuiMonth, TuiValueTransformer } from '@taiga-ui/cdk';

type From = TuiDay | TuiMonth | null;
type To = Date | null;

export class NativeDateTransformerService extends TuiValueTransformer<From, To> {
    constructor(public mode: 'day' | 'month' = 'day') {
        super();
    }

    fromControlValue(controlValue: To): From {
        if (!controlValue) return null;
        if (!(controlValue instanceof Date)) {
            controlValue = new Date(controlValue);
        }

        if (this.mode === 'month') {
            return new TuiMonth(controlValue.getFullYear(), controlValue.getMonth());
        }

        return TuiDay.fromLocalNativeDate(controlValue);
    }

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

[loxy]

But you could store it as two numbers which is very fast

[loxy]

And you also don't need a full text search here. So, also a string search is fast with an index

[vytautas-pranskunas-]

Storing as 2 numbers makes mess in database.. imagine if you have dateFrom, dateTo as we have for example now have in certain case so we would need to store
monthFrom, monthTo, yearFrom, yearTo, dateTo, dateFrom

what if more?
What would be structure that needs to be sent to and from API?

our case for example is that for certain payout code we need to show full date picker and for certain only year and month but they both are stored in same field. With your proposal i would have to set reactive form (as well as DB fields and API model)

dateFrom
dateTo
monthFrom
monthTo
yearFrom
yearTo

manage their validity and required conditions in runtime depending on selected payout code. And all this because component stores his own data structure.

I agree that it is my case - but this is real case because this system will be used accross all country in 50+ institutions.

And you also don't need a full text search here. So, also a string search is fast with an index

it might be fast but on Mongodb you need to create special indexes only in the Mongo Cloud + text search is less bugs prone

But... It is my point of view - you do not have to aggree with this but I do not see ANY advantages of storing SPECIAL format. Are there any?

Not even mentioning sorting / search in the grid later... Instead of picking dataFrom and dateTo - i will have to pick 4 columns

[vytautas-pranskunas-]

At least it would be great to have configurable output. Either TuiMonth either TuiDate with default day

[waterplea]

You can store data any way you like, all you need to do is provide component with 2 very simple methods of turning the data from the way you like to the way component works (TuiMonth | null) and back. I don't see this discussion going anywhere.