feat(kit): InputDate add full support of TUI_DATE_FORMAT (#1146)

* chore(kit): new `tuiCreateDateMask` (with localization support) * feat(kit): `InputDate` add full support of `TUI_DATE_FORMAT` * chore(kit): `InputDate` add unit tests of `TUI_DATE_FORMAT` integration * feat(cdk): new token `TUI_DATE_SEPARATOR` + integration with `InputDate` * chore(kit): add `Tui-` prefix for interfaces * chore(kit): `InputDate` add unit tests of `TUI_DATE_SEPARATOR` integration * chore(kit): `tuiCreateDateMask` unit tests * chore(kit): rm extra TODO notes * chore(kit): refactor `tuiCreateDateMask`
taiga-family · Dec 27, 2021 · 52d6472 · 52d6472
1 parent 79cee45
commit 52d6472
Show file tree

Hide file tree

Showing 17 changed files with 500 additions and 134 deletions.
diff --git a/projects/cdk/date-time/date-separator.ts b/projects/cdk/date-time/date-separator.ts
@@ -0,0 +1,8 @@
+import {InjectionToken} from '@angular/core';
+
+export const TUI_DATE_SEPARATOR = new InjectionToken<string>(
+    'Date separator for Taiga UI components',
+    {
+        factory: () => '.',
+    },
+);
diff --git a/projects/cdk/date-time/index.ts b/projects/cdk/date-time/index.ts
@@ -1,5 +1,6 @@
 export * from './date-fillers';
 export * from './date-format';
+export * from './date-separator';
 export * from './date-time';
 export * from './day';
 export * from './day-range';

diff --git a/projects/demo/src/modules/components/input-date/examples/4/index.html b/projects/demo/src/modules/components/input-date/examples/4/index.html
@@ -0,0 +1,18 @@
+<h3 i18n>DI-tokens for date format localization:</h3>
+
+<dl i18n>
+    <dt><code>TUI_DATE_FORMAT</code></dt>
+    <dd>
+        active date format (
+        <code>'DMY' | 'MDY' | 'YMD'</code>
+        )
+    </dd>
+    <dt><code>TUI_DATE_SEPARATOR</code></dt>
+    <dd>single-character date's separator (dot, slash etc.)</dd>
+</dl>
+
+<br />
+
+<tui-input-date class="input" [formControl]="control">
+    Choose a date
+</tui-input-date>
diff --git a/projects/demo/src/modules/components/input-date/examples/4/index.less b/projects/demo/src/modules/components/input-date/examples/4/index.less
@@ -0,0 +1,13 @@
+@import 'taiga-ui-local';
+
+dd {
+    margin-bottom: 1rem;
+}
+
+.input {
+    width: 50%;
+
+    @media @mobile {
+        width: 100%;
+    }
+}
diff --git a/projects/demo/src/modules/components/input-date/examples/4/index.ts b/projects/demo/src/modules/components/input-date/examples/4/index.ts
@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TUI_DATE_FORMAT, TUI_DATE_SEPARATOR, TuiDay} from '@taiga-ui/cdk';
+
+@Component({
+    selector: 'tui-input-date-example-4',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    providers: [
+        {provide: TUI_DATE_FORMAT, useValue: 'YMD'},
+        {provide: TUI_DATE_SEPARATOR, useValue: '/'},
+    ],
+    changeDetection,
+    encapsulation,
+})
+export class TuiInputDateExample4 {
+    readonly control = new FormControl(new TuiDay(2017, 0, 15));
+}
diff --git a/projects/demo/src/modules/components/input-date/input-date.component.ts b/projects/demo/src/modules/components/input-date/input-date.component.ts
@@ -1,6 +1,7 @@
 import {Component, forwardRef} from '@angular/core';
 import {FormControl, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {
     ALWAYS_FALSE_HANDLER,
     TUI_FIRST_DAY,
@@ -17,17 +18,10 @@ import {
 } from '@taiga-ui/core';
 import {TuiNamedDay} from '@taiga-ui/kit';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
 import {default as exampleDeclareForm} from '!!raw-loader!./examples/import/declare-form.txt';
 import {default as exampleImportModule} from '!!raw-loader!./examples/import/import-module.txt';
 import {default as exampleInsertTemplate} from '!!raw-loader!./examples/import/insert-template.txt';
 
-import {FrontEndExample} from '../../interfaces/front-end-example';
 import {AbstractExampleTuiControl} from '../abstract/control';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
 
@@ -50,19 +44,25 @@ export class ExampleTuiInputDateComponent extends AbstractExampleTuiControl {
     readonly exampleImportModule = exampleImportModule;
     readonly exampleInsertTemplate = exampleInsertTemplate;
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+    };
+
+    readonly example4: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/4/index.ts'),
+        HTML: import('!!raw-loader!./examples/4/index.html'),
+        LESS: import('!!raw-loader!./examples/4/index.less'),
     };
 
     minVariants = [TUI_FIRST_DAY, new TuiDay(2017, 2, 5), new TuiDay(1900, 0, 1)];

diff --git a/projects/demo/src/modules/components/input-date/input-date.module.ts b/projects/demo/src/modules/components/input-date/input-date.module.ts
@@ -21,6 +21,7 @@ import {InheritedDocumentationModule} from '../abstract/inherited-documentation/
 import {TuiInputDateExample1} from './examples/1';
 import {TuiInputDateExample2} from './examples/2';
 import {TuiInputDateExample3} from './examples/3';
+import {TuiInputDateExample4} from './examples/4';
 import {ExampleTuiInputDateComponent} from './input-date.component';
 
 @NgModule({
@@ -46,6 +47,7 @@ import {ExampleTuiInputDateComponent} from './input-date.component';
         TuiInputDateExample1,
         TuiInputDateExample2,
         TuiInputDateExample3,
+        TuiInputDateExample4,
     ],
     exports: [ExampleTuiInputDateComponent],
 })

diff --git a/projects/demo/src/modules/components/input-date/input-date.template.html b/projects/demo/src/modules/components/input-date/input-date.template.html
@@ -28,6 +28,15 @@
         >
             <tui-input-date-example-3></tui-input-date-example-3>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="date-localization"
+            i18n-heading
+            heading="Date localization"
+            [content]="example4"
+        >
+            <tui-input-date-example-4></tui-input-date-example-4>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

diff --git a/projects/kit/components/input-date-time/input-date-time.component.ts b/projects/kit/components/input-date-time/input-date-time.component.ts
@@ -39,7 +39,7 @@ import {
     TuiTextMaskOptions,
     TuiWithOptionalMinMax,
 } from '@taiga-ui/core';
-import {DATE_TIME_SEPARATOR, TUI_DATE_MASK} from '@taiga-ui/kit/constants';
+import {DATE_TIME_SEPARATOR} from '@taiga-ui/kit/constants';
 import {LEFT_ALIGNED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/kit/providers';
 import {
     TUI_CALENDAR_DATA_STREAM,
@@ -48,6 +48,7 @@ import {
 } from '@taiga-ui/kit/tokens';
 import {
     tuiCreateAutoCorrectedDateTimePipe,
+    tuiCreateDateMask,
     tuiCreateTimeMask,
 } from '@taiga-ui/kit/utils/mask';
 import {TuiReplayControlValueChangesFactory} from '@taiga-ui/kit/utils/miscellaneous';
@@ -140,6 +141,9 @@ export class TuiInputDateTimeComponent
             this.calendarMinDay,
             this.calendarMaxDay,
             this.timeMode,
+            // TODO finish localization in {@link https://github.com/TinkoffCreditSystems/taiga-ui/issues/954 issue}
+            'DMY',
+            '.',
         );
     }
 
@@ -314,10 +318,24 @@ export class TuiInputDateTimeComponent
         min: TuiDay,
         max: TuiDay,
         timeMode: TuiTimeMode,
+        dateFormat: TuiDateMode,
+        dateSeparator: string,
     ): TuiTextMaskOptions {
         return {
-            mask: [...TUI_DATE_MASK, ',', ' ', ...tuiCreateTimeMask(timeMode)],
-            pipe: tuiCreateAutoCorrectedDateTimePipe({value: day, min, max}, timeMode),
+            mask: [
+                ...tuiCreateDateMask(dateFormat, dateSeparator),
+                ',',
+                ' ',
+                ...tuiCreateTimeMask(timeMode),
+            ],
+            pipe: tuiCreateAutoCorrectedDateTimePipe({
+                value: day,
+                min,
+                max,
+                dateFormat,
+                dateSeparator,
+                timeMode,
+            }),
             guide: false,
         };
     }

diff --git a/projects/kit/components/input-date/input-date.component.ts b/projects/kit/components/input-date/input-date.component.ts
@@ -19,6 +19,7 @@ import {
     DATE_FILLER_LENGTH,
     nullableSame,
     TUI_DATE_FORMAT,
+    TUI_DATE_SEPARATOR,
     TUI_FIRST_DAY,
     TUI_FOCUSABLE_ITEM_ACCESSOR,
     TUI_IS_MOBILE,
@@ -42,14 +43,17 @@ import {
     TuiWithOptionalMinMax,
 } from '@taiga-ui/core';
 import {TuiNamedDay} from '@taiga-ui/kit/classes';
-import {EMPTY_MASK, TUI_DATE_MASK} from '@taiga-ui/kit/constants';
+import {EMPTY_MASK} from '@taiga-ui/kit/constants';
 import {LEFT_ALIGNED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/kit/providers';
 import {
     TUI_CALENDAR_DATA_STREAM,
     TUI_DATE_TEXTS,
     TUI_MOBILE_CALENDAR,
 } from '@taiga-ui/kit/tokens';
-import {tuiCreateAutoCorrectedDatePipe} from '@taiga-ui/kit/utils/mask';
+import {
+    tuiCreateAutoCorrectedDatePipe,
+    tuiCreateDateMask,
+} from '@taiga-ui/kit/utils/mask';
 import {TuiReplayControlValueChangesFactory} from '@taiga-ui/kit/utils/miscellaneous';
 import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus';
 import {Observable} from 'rxjs';
@@ -86,7 +90,7 @@ export class TuiInputDateComponent
     private month: TuiMonth | null = null;
 
     private readonly textMaskOptions: TuiTextMaskOptions = {
-        mask: TUI_DATE_MASK,
+        mask: tuiCreateDateMask(this.dateFormat, this.dateSeparator),
         pipe: tuiCreateAutoCorrectedDatePipe(this),
         guide: false,
     };
@@ -133,6 +137,7 @@ export class TuiInputDateComponent
         @Inject(TUI_TEXTFIELD_SIZE)
         private readonly textfieldSize: TuiTextfieldSizeDirective,
         @Inject(TUI_DATE_FORMAT) readonly dateFormat: TuiDateMode,
+        @Inject(TUI_DATE_SEPARATOR) readonly dateSeparator: string,
         @Inject(TUI_DATE_TEXTS)
         readonly dateTexts$: Observable<Record<TuiDateMode, string>>,
     ) {
@@ -164,7 +169,7 @@ export class TuiInputDateComponent
             return String(activeItem);
         }
 
-        return value ? String(value) : nativeValue;
+        return value ? value.toString(this.dateFormat, this.dateSeparator) : nativeValue;
     }
 
     get computedActiveYearMonth(): TuiMonth {
@@ -246,7 +251,9 @@ export class TuiInputDateComponent
         }
 
         this.updateValue(
-            value.length !== DATE_FILLER_LENGTH ? null : TuiDay.normalizeParse(value),
+            value.length !== DATE_FILLER_LENGTH
+                ? null
+                : TuiDay.normalizeParse(value, this.dateFormat),
         );
     }