fix(kit): Date-mask fix wrong year that appears using the min prope…

…rty (#157)
taiga-family · Mar 1, 2023 · 544e891 · 544e891
1 parent 0815b8e
commit 544e891
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 84 deletions.
diff --git a/projects/demo-integrations/cypress/tests/kit/date/date-min-max.cy.ts b/projects/demo-integrations/cypress/tests/kit/date/date-min-max.cy.ts
@@ -103,6 +103,25 @@ describe('Date', () => {
         });
     });
 
+    describe('Min date 2000', () => {
+        beforeEach(() => {
+            cy.visit(`/${DemoPath.Date}/API?min=2000-01-01`);
+            cy.get('#demo-content input')
+                .should('be.visible')
+                .first()
+                .focus()
+                .as('input');
+        });
+
+        it('Input less than min value', () => {
+            cy.get('@input')
+                .type('10101997')
+                .should('have.value', '01.01.2000')
+                .should('have.prop', 'selectionStart', '01.01.2000'.length)
+                .should('have.prop', 'selectionEnd', '01.01.2000'.length);
+        });
+    });
+
     describe('Max date, shortened year', () => {
         beforeEach(() => {
             cy.visit(`/${DemoPath.Date}/API?max=2020-05-05&mode=mm%2Fyy&separator=%2F`);

diff --git a/projects/demo/src/pages/kit/date/date-mask-doc.component.ts b/projects/demo/src/pages/kit/date/date-mask-doc.component.ts
@@ -2,6 +2,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {MaskitoOptions} from '@maskito/core';
 import {MaskitoDateMode, maskitoDateOptionsGenerator} from '@maskito/kit';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 type GeneratorOptions = Required<Parameters<typeof maskitoDateOptionsGenerator>[0]>;
 
@@ -14,22 +15,13 @@ type GeneratorOptions = Required<Parameters<typeof maskitoDateOptionsGenerator>[
 export class DateMaskDocComponent implements GeneratorOptions {
     apiPageControl = new FormControl('');
 
-    readonly preparedMasks = {
-        DMY: maskitoDateOptionsGenerator({mode: 'dd/mm/yyyy'}),
-        MDY: maskitoDateOptionsGenerator({mode: 'mm/dd/yyyy', separator: '-'}),
-        YMD: maskitoDateOptionsGenerator({mode: 'yyyy/mm/dd', separator: '/'}),
+    readonly dateLocalization: TuiDocExample = {
+        MaskitoOptions: import('./examples/1-localization/mask.ts?raw'),
     };
 
-    minMask = maskitoDateOptionsGenerator({
-        mode: 'dd/mm/yyyy',
-        min: new Date(2010, 5, 1),
-    });
-
-    minMaxMask = maskitoDateOptionsGenerator({
-        mode: 'dd/mm/yyyy',
-        min: new Date(2000, 0, 1),
-        max: new Date(2025, 4, 10),
-    });
+    readonly dateMinMax: TuiDocExample = {
+        MaskitoOptions: import('./examples/2-min-max/mask.ts?raw'),
+    };
 
     readonly modeOptions: MaskitoDateMode[] = [
         `dd/mm/yyyy`,

diff --git a/projects/demo/src/pages/kit/date/date-mask-doc.module.ts b/projects/demo/src/pages/kit/date/date-mask-doc.module.ts
@@ -8,6 +8,8 @@ import {TuiLinkModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {TuiInputModule} from '@taiga-ui/kit';
 
 import {DateMaskDocComponent} from './date-mask-doc.component';
+import {DateMaskDocExample1} from './examples/1-localization/component';
+import {DateMaskDocExample2} from './examples/2-min-max/component';
 
 @NgModule({
     imports: [
@@ -21,7 +23,7 @@ import {DateMaskDocComponent} from './date-mask-doc.component';
         TuiTextfieldControllerModule,
         RouterModule.forChild(tuiGenerateRoutes(DateMaskDocComponent)),
     ],
-    declarations: [DateMaskDocComponent],
+    declarations: [DateMaskDocComponent, DateMaskDocExample1, DateMaskDocExample2],
     exports: [DateMaskDocComponent],
 })
 export class DateMaskDocModule {}
diff --git a/projects/demo/src/pages/kit/date/date-mask-doc.template.html b/projects/demo/src/pages/kit/date/date-mask-doc.template.html
@@ -10,6 +10,7 @@
         <tui-doc-example
             id="date-localization"
             heading="Date localization"
+            [content]="dateLocalization"
             [description]="dateLocalizationDescription"
         >
             <ng-template #dateLocalizationDescription>
@@ -21,50 +22,13 @@
                 of dates.
             </ng-template>
 
-            <tui-input
-                tuiTextfieldCustomContent="tuiIconCalendarLarge"
-                ngModel="02.06.2018"
-                tuiTextfieldFiller="dd.mm.yyyy"
-                class="input-date"
-            >
-                DMY
-                <input
-                    tuiTextfield
-                    inputmode="decimal"
-                    [maskito]="preparedMasks['DMY']"
-                />
-            </tui-input>
-            <tui-input
-                tuiTextfieldCustomContent="tuiIconCalendarLarge"
-                ngModel="12-23-2023"
-                tuiTextfieldFiller="mm-dd-yyyy"
-                class="input-date"
-            >
-                MDY
-                <input
-                    tuiTextfield
-                    inputmode="decimal"
-                    [maskito]="preparedMasks['MDY']"
-                />
-            </tui-input>
-            <tui-input
-                tuiTextfieldCustomContent="tuiIconCalendarLarge"
-                ngModel="2005/10/21"
-                tuiTextfieldFiller="yyyy/mm/dd"
-                class="input-date"
-            >
-                YMD
-                <input
-                    tuiTextfield
-                    inputmode="decimal"
-                    [maskito]="preparedMasks['YMD']"
-                />
-            </tui-input>
+            <date-mask-doc-example-1></date-mask-doc-example-1>
         </tui-doc-example>
 
         <tui-doc-example
             id="min-max"
             heading="Min/Max"
+            [content]="dateMinMax"
             [description]="minMaxDescription"
         >
             <ng-template #minMaxDescription>
@@ -84,35 +48,7 @@
                 .
             </ng-template>
 
-            <span>Min 01.06.2010</span>
-            <tui-input
-                tuiTextfieldCustomContent="tuiIconCalendarLarge"
-                ngModel="02.06.2018"
-                tuiTextfieldFiller="dd.mm.yyyy"
-                class="input-date"
-            >
-                Date
-                <input
-                    tuiTextfield
-                    inputmode="decimal"
-                    [maskito]="minMask"
-                />
-            </tui-input>
-
-            <span>Min 01.01.2000, Max 10.05.2025</span>
-            <tui-input
-                tuiTextfieldCustomContent="tuiIconCalendarLarge"
-                ngModel="20.01.2023"
-                tuiTextfieldFiller="dd.mm.yyyy"
-                class="input-date"
-            >
-                Date
-                <input
-                    tuiTextfield
-                    inputmode="decimal"
-                    [maskito]="minMaxMask"
-                />
-            </tui-input>
+            <date-mask-doc-example-2></date-mask-doc-example-2>
         </tui-doc-example>
     </ng-template>
 

diff --git a/projects/demo/src/pages/kit/date/examples/1-localization/component.ts b/projects/demo/src/pages/kit/date/examples/1-localization/component.ts
@@ -0,0 +1,28 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+import mask from './mask';
+
+@Component({
+    selector: 'date-mask-doc-example-1',
+    template: `
+        <tui-input
+            tuiTextfieldCustomContent="tuiIconCalendarLarge"
+            [tuiTextfieldFiller]="filler"
+            [style.max-width.rem]="30"
+            [(ngModel)]="value"
+        >
+            Localization
+            <input
+                tuiTextfield
+                inputmode="decimal"
+                [maskito]="mask"
+            />
+        </tui-input>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DateMaskDocExample1 {
+    value = '2005/10/21';
+    readonly filler = 'yyyy/mm/dd';
+    readonly mask = mask;
+}
diff --git a/projects/demo/src/pages/kit/date/examples/1-localization/mask.ts b/projects/demo/src/pages/kit/date/examples/1-localization/mask.ts
@@ -0,0 +1,3 @@
+import {maskitoDateOptionsGenerator} from '@maskito/kit';
+
+export default maskitoDateOptionsGenerator({mode: 'yyyy/mm/dd', separator: '/'});
diff --git a/projects/demo/src/pages/kit/date/examples/2-min-max/component.ts b/projects/demo/src/pages/kit/date/examples/2-min-max/component.ts
@@ -0,0 +1,28 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+import mask from './mask';
+
+@Component({
+    selector: 'date-mask-doc-example-2',
+    template: `
+        <tui-input
+            tuiTextfieldCustomContent="tuiIconCalendarLarge"
+            [tuiTextfieldFiller]="filler"
+            [style.max-width.rem]="30"
+            [(ngModel)]="value"
+        >
+            Date
+            <input
+                tuiTextfield
+                inputmode="decimal"
+                [maskito]="mask"
+            />
+        </tui-input>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DateMaskDocExample2 {
+    value = '20.01.2023';
+    readonly filler = 'dd.mm.yyyy';
+    readonly mask = mask;
+}
diff --git a/projects/demo/src/pages/kit/date/examples/2-min-max/mask.ts b/projects/demo/src/pages/kit/date/examples/2-min-max/mask.ts
@@ -0,0 +1,7 @@
+import {maskitoDateOptionsGenerator} from '@maskito/kit';
+
+export default maskitoDateOptionsGenerator({
+    mode: 'dd/mm/yyyy',
+    min: new Date(2000, 0, 1),
+    max: new Date(2025, 4, 10),
+});
diff --git a/projects/kit/src/lib/utils/date/segments-to-date.ts b/projects/kit/src/lib/utils/date/segments-to-date.ts
@@ -17,7 +17,7 @@ export function segmentsToDate(
     );
 
     // needed for years less than 1900
-    date.setUTCFullYear(Number(year ?? '0'));
+    date.setFullYear(Number(year ?? '0'));
 
     return date;
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import {maskitoDateOptionsGenerator} from '@maskito/kit';

		export default maskitoDateOptionsGenerator({mode: 'yyyy/mm/dd', separator: '/'});