feat(kit): Date, DateTime, DateRange supports strict and non-strict modes

projects/demo-integrations/src/tests/kit/date-range/date-range-strict-mode.cy.ts

@@ -0,0 +1,94 @@
+import {DemoPath} from '@demo/constants';
+
+describe('DateRange | Strict mode', () => {
+    describe('Disabled', () => {
+        describe("doesn't fix wrong dates", () => {
+            beforeEach(() => {
+                cy.visit(`/${DemoPath.DateRange}/API?strict=false`);
+                cy.get('#demo-content input')
+                    .should('be.visible')
+                    .first()
+                    .focus()
+                    .as('input');
+            });
+
+            it('30.02.2004 => 30.02.2004 - 31.02.2004', () => {
+                cy.get('@input')
+                    .type('30022004')
+                    .should('have.value', '30.02.2004')
+                    .type('31022004')
+                    .should('have.value', '30.02.2004 – 31.02.2004');
+            });
+
+            it('29.02.2003 => 29.02.2003 - 31.04.2004', () => {
+                cy.get('@input')
+                    .type('29022003')
+                    .should('have.value', '29.02.2003')
+                    .type('31042004')
+                    .should('have.value', '29.02.2003 – 31.04.2004');
+            });
+
+            it('31.06.2004 => 31.06.2004 - 31.09.2004', () => {
+                cy.get('@input')
+                    .type('31062004')
+                    .should('have.value', '31.06.2004')
+                    .type('31092004')
+                    .should('have.value', '31.06.2004 – 31.09.2004');
+            });
+        });
+
+        describe('swaps range ends with wrong dates', () => {
+            beforeEach(() => {
+                cy.visit(`/${DemoPath.DateRange}/API?strict=false`);
+                cy.get('#demo-content input')
+                    .should('be.visible')
+                    .first()
+                    .focus()
+                    .as('input');
+            });
+
+            it('31.02.2004 - 30.02.2004 => 30.02.2004 - 31.02.2004', () => {
+                cy.get('@input')
+                    .type('3102200430022004')
+                    .should('have.value', '30.02.2004 – 31.02.2004');
+            });
+
+            it('31.04.2004 - 29.02.2003 => 29.02.2003 - 31.04.2004', () => {
+                cy.get('@input')
+                    .type('3104200429022003')
+                    .should('have.value', '29.02.2003 – 31.04.2004');
+            });
+
+            it('01.01.2012 - 31.02.1999 => 31.02.1999 - 01.01.2012', () => {
+                cy.get('@input')
+                    .type('0101201231021999')
+                    .should('have.value', '31.02.1999 – 01.01.2012');
+            });
+        });
+
+        describe('replaces dates to max and min, when date greater max 10.05.2025 and less min 01.01.2000', () => {
+            beforeEach(() => {
+                cy.visit(
+                    `/${DemoPath.DateRange}/API?strict=false&max=2025-05-10&min=2000-01-01`,
+                );
+                cy.get('#demo-content input')
+                    .should('be.visible')
+                    .first()
+                    .focus()
+                    .as('input');
+            });
+
+            it('30.02.1999 - 31.11.2029 => 01.01.2000 - 10.05.2025', () => {
+                cy.get('@input')
+                    .type('3002199931112029')
+                    .should('have.value', '01.01.2000 – 10.05.2025');
+            });
+
+            it('31.11.2029 - 30.02.1999 => 01.01.2000 - 10.05.2025', () => {
+                cy.get('@input')
+                    .type('3111202930021999')
+                    .should('have.value', '01.01.2000 – 10.05.2025');
+            });
+        });
+    });
+});

projects/demo-integrations/src/tests/kit/date-time/date-time-strict-mode.cy.ts

@@ -0,0 +1,118 @@
+import {DemoPath} from '@demo/constants';
+
+describe('Date | Strict mode', () => {
+    describe('Disabled', () => {
+        describe("doesn't fix wrong dates", () => {
+            beforeEach(() => {
+                cy.visit(`/${DemoPath.DateTime}/API?strict=false`);
+                cy.get('#demo-content input')
+                    .should('be.visible')
+                    .first()
+                    .focus()
+                    .as('input');
+            });
+
+            it('30.02.2004, 23:21', () => {
+                cy.get('@input')
+                    .type('300220042321')
+                    .should('have.value', '30.02.2004, 23:21');
+            });
+
+            it('31.02.2004, 12:21', () => {
+                cy.get('@input')
+                    .type('310220041221')
+                    .should('have.value', '31.02.2004, 12:21');
+            });
+
+            it('29.02.2003, 00:00', () => {
+                cy.get('@input')
+                    .type('290220030000')
+                    .should('have.value', '29.02.2003, 00:00');
+            });
+
+            it('31.04.2004, 10:00', () => {
+                cy.get('@input')
+                    .type('310420041000')
+                    .should('have.value', '31.04.2004, 10:00');
+            });
+
+            it('31.04.2004, 23:21', () => {
+                cy.get('@input')
+                    .type('310420042321')
+                    .should('have.value', '31.04.2004, 23:21');
+            });
+
+            it('31.06.2004, 23:21', () => {
+                cy.get('@input')
+                    .type('310620042321')
+                    .should('have.value', '31.06.2004, 23:21');
+            });
+
+            it('31.09.2004, 23:21', () => {
+                cy.get('@input')
+                    .type('310920042321')
+                    .should('have.value', '31.09.2004, 23:21');
+            });
+
+            it('31.11.2004, 23:21', () => {
+                cy.get('@input')
+                    .type('311120042321')
+                    .should('have.value', '31.11.2004, 23:21');
+            });
+        });
+
+        describe('replaces dates to min, when date less min 01.01.2000, 12:30', () => {
+            beforeEach(() => {
+                cy.visit(`/${DemoPath.DateTime}/API?strict=false&min=2000-01-01T12:30`);
+                cy.get('#demo-content input')
+                    .should('be.visible')
+                    .first()
+                    .focus()
+                    .as('input');
+            });
+
+            it('30.02.2004 => 30.02.2004, 12:20', () => {
+                cy.get('@input')
+                    .type('30022004')
+                    .should('have.value', '30.02.2004')
+                    .type('1220')
+                    .should('have.value', '30.02.2004, 12:20');
+            });
+
+            it('31.11.1009 => 01.01.2000 => 01.01.2000, 12:30', () => {
+                cy.get('@input')
+                    .type('31111009')
+                    .should('have.value', '01.01.2000')
+                    .type('1220')
+                    .should('have.value', '01.01.2000, 12:30');
+            });
+        });
+
+        describe('replaces dates to max, when date greater max 10.05.2025,  18:30', () => {
+            beforeEach(() => {
+                cy.visit(`/${DemoPath.DateTime}/API?strict=false&max=2025-05-10T18:30`);
+                cy.get('#demo-content input')
+                    .should('be.visible')
+                    .first()
+                    .focus()
+                    .as('input');
+            });
+
+            it('31.04.2025 => 31.04.2025. 20:20', () => {
+                cy.get('@input')
+                    .type('31042025')
+                    .should('have.value', '31.04.2025')
+                    .type('2020')
+                    .should('have.value', '31.04.2025, 20:20');
+            });
+
+            it('29.02.2027 => 10.05.2025 => 10.05.2025, 18:30,', () => {
+                cy.get('@input')
+                    .type('29022027')
+                    .should('have.value', '10.05.2025')
+                    .type('19:19')
+                    .should('have.value', '10.05.2025, 18:30');
+            });
+        });
+    });
+});

projects/demo-integrations/src/tests/kit/date/date-strict-mode.cy.ts

@@ -0,0 +1,86 @@
+import {DemoPath} from '@demo/constants';
+
+describe('Date | Strict mode', () => {
+    describe('Disabled', () => {
+        describe("doesn't fix wrong dates", () => {
+            beforeEach(() => {
+                cy.visit(`/${DemoPath.Date}/API?strict=false`);
+                cy.get('#demo-content input')
+                    .should('be.visible')
+                    .first()
+                    .focus()
+                    .as('input');
+            });
+
+            it('30.02.2004', () => {
+                cy.get('@input').type('30022004').should('have.value', '30.02.2004');
+            });
+
+            it('31.02.2004', () => {
+                cy.get('@input').type('31022004').should('have.value', '31.02.2004');
+            });
+
+            it('29.02.2003', () => {
+                cy.get('@input').type('29022003').should('have.value', '29.02.2003');
+            });
+
+            it('31.04.2004', () => {
+                cy.get('@input').type('31042004').should('have.value', '31.04.2004');
+            });
+
+            it('31.04.2004', () => {
+                cy.get('@input').type('31042004').should('have.value', '31.04.2004');
+            });
+
+            it('31.06.2004', () => {
+                cy.get('@input').type('31062004').should('have.value', '31.06.2004');
+            });
+
+            it('31.09.2004', () => {
+                cy.get('@input').type('31092004').should('have.value', '31.09.2004');
+            });
+
+            it('31.11.2004', () => {
+                cy.get('@input').type('31112004').should('have.value', '31.11.2004');
+            });
+        });
+
+        describe('replaces dates to min, when date less min 01.01.2000', () => {
+            beforeEach(() => {
+                cy.visit(`/${DemoPath.Date}/API?strict=false&min=2000-01-01`);
+                cy.get('#demo-content input')
+                    .should('be.visible')
+                    .first()
+                    .focus()
+                    .as('input');
+            });
+
+            it('30.02.2004 => 30.02.2004', () => {
+                cy.get('@input').type('30022004').should('have.value', '30.02.2004');
+            });
+
+            it('31.11.1009 => 01.01.2000', () => {
+                cy.get('@input').type('31111009').should('have.value', '01.01.2000');
+            });
+        });
+
+        describe('replaces dates to max, when date greater max 10.05.2025', () => {
+            beforeEach(() => {
+                cy.visit(`/${DemoPath.Date}/API?strict=false&max=2025-05-10`);
+                cy.get('#demo-content input')
+                    .should('be.visible')
+                    .first()
+                    .focus()
+                    .as('input');
+            });
+
+            it('31.04.2025 => 31.04.2025', () => {
+                cy.get('@input').type('31042025').should('have.value', '31.04.2025');
+            });
+
+            it('29.02.2027 => 10.05.2025', () => {
+                cy.get('@input').type('29022027').should('have.value', '10.05.2025');
+            });
+        });
+    });
+});

projects/demo/src/pages/documentation/supported-input-types/supported-input-types.template.html

@@ -13,15 +13,22 @@
         </p>
 
         <ul class="tui-list">
-            <li class="tui-list__item"><code>selectionStart</code></li>
-            <li class="tui-list__item"><code>selectionEnd</code></li>
-            <li class="tui-list__item"><code>setSelectionRange</code></li>
+            <li class="tui-list__item">
+                <code>selectionStart</code>
+            </li>
+            <li class="tui-list__item">
+                <code>selectionEnd</code>
+            </li>
+            <li class="tui-list__item">
+                <code>setSelectionRange</code>
+            </li>
         </ul>
 
         <p>
             According to the
             <a
                 href="https://html.spec.whatwg.org/multipage/input.html#concept-input-apply"
+                rel="noreferrer"
                 target="_blank"
                 tuiLink
             >

projects/demo/src/pages/kit/date-range/date-range-mask-doc.component.ts

@@ -15,6 +15,7 @@ import {DateRangeMaskDocExample1} from './examples/1-date-localization/component
 import {DateRangeMaskDocExample2} from './examples/2-min-max/component';
 import {DateRangeMaskDocExample3} from './examples/3-min-max-length/component';
 import {DateRangeMaskDocExample4} from './examples/4-range-separator/component';
+import {DateRangeMaskDocExample5} from './examples/5-strict-mode/component';
 
 type GeneratorOptions = Required<
     NonNullable<Parameters<typeof maskitoDateRangeOptionsGenerator>[0]>
@@ -34,6 +35,7 @@ type GeneratorOptions = Required<
         DateRangeMaskDocExample2,
         DateRangeMaskDocExample3,
         DateRangeMaskDocExample4,
+        DateRangeMaskDocExample5,
     ],
     templateUrl: './date-range-mask-doc.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -61,6 +63,12 @@ export class DateRangeMaskDocComponent implements GeneratorOptions {
         ),
     };
 
+    protected readonly strictModeExample5: TuiDocExample = {
+        [DocExamplePrimaryTab.MaskitoOptions]: import(
+            './examples/5-strict-mode/mask.ts?raw'
+        ),
+    };
+
     protected apiPageControl = new FormControl('');
 
     protected readonly modeOptions: MaskitoDateMode[] = [
@@ -101,6 +109,7 @@ export class DateRangeMaskDocComponent implements GeneratorOptions {
     public maxLength: Partial<MaskitoDateSegments<number>> = {};
     public dateSeparator = '.';
     public rangeSeparator = ' – ';
+    public strict = true;
 
     protected maskitoOptions: MaskitoOptions = maskitoDateRangeOptionsGenerator(this);