chore(demo): InputDateTime add example with custom validator

projects/demo-playwright/tests/legacy/input-date-time/input-date-time.pw.spec.ts

@@ -310,4 +310,37 @@ test.describe('InputDateTime', () => {
             });
         });
     });
+
+    test.describe('Examples', () => {
+        let example!: Locator;
+        let documentationPage!: TuiDocumentationPagePO;
+        let inputDateTime!: TuiInputDateTimePO;
+
+        test.beforeEach(async ({page}) => {
+            await tuiGoto(page, DemoRoute.InputDateTime);
+
+            documentationPage = new TuiDocumentationPagePO(page);
+            example = documentationPage.apiPageExample;
+
+            inputDateTime = new TuiInputDateTimePO(
+                example.locator('tui-input-date-time'),
+            );
+        });
+
+        test('With validator: enter incomplete date -> validator error', async () => {
+            example = documentationPage.getExample('#with-validator');
+            inputDateTime = new TuiInputDateTimePO(
+                example.locator('tui-input-date-time'),
+            );
+
+            await inputDateTime.textfield.clear();
+            await inputDateTime.textfield.fill('11');
+            await inputDateTime.textfield.blur();
+
+            await expect(example).toHaveScreenshot(
+                '04-input-data-time-with-validator.png',
+                {animations: 'allow'},
+            );
+        });
+    });
 });

projects/demo/src/modules/components/input-date-time/examples/7/index.html

@@ -0,0 +1,11 @@
+<form [formGroup]="testForm">
+    <tui-input-date-time formControlName="testValue">Choose date and time</tui-input-date-time>
+    <tui-error
+        formControlName="testValue"
+        [error]="[] | tuiFieldError | async"
+    ></tui-error>
+
+    <p>Form value:</p>
+
+    <pre><code>{{ testForm.value | json }}</code></pre>
+</form>

projects/demo/src/modules/components/input-date-time/examples/7/index.ts

@@ -0,0 +1,44 @@
+import {AsyncPipe, JsonPipe} from '@angular/common';
+import {Component} from '@angular/core';
+import {
+    AbstractControl,
+    FormControl,
+    FormGroup,
+    ReactiveFormsModule,
+    type ValidationErrors,
+    type ValidatorFn,
+} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiDay} from '@taiga-ui/cdk';
+import {TuiError} from '@taiga-ui/core';
+import {TuiFieldErrorPipe} from '@taiga-ui/kit';
+import {TuiInputDateTimeModule} from '@taiga-ui/legacy';
+
+const completeDateTimeValidator: ValidatorFn = (
+    control: AbstractControl,
+): ValidationErrors | null =>
+    control.value.every(Boolean) ? null : {incompleteDateTime: true};
+
+@Component({
+    standalone: true,
+    imports: [
+        AsyncPipe,
+        JsonPipe,
+        ReactiveFormsModule,
+        TuiInputDateTimeModule,
+        TuiError,
+        TuiFieldErrorPipe,
+    ],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected readonly testForm = new FormGroup({
+        testValue: new FormControl(
+            [new TuiDay(2017, 2, 15), null],
+            completeDateTimeValidator,
+        ),
+    });
+}

projects/demo/src/modules/components/input-date-time/index.html

@@ -115,6 +115,20 @@ <h3>DI-tokens for input-configurations:</h3>
                 is 12-hour time format with meridiem part
             </ng-template>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="with-validator"
+            heading="With validator"
+            [component]="7 | tuiComponent"
+            [content]="7 | tuiExample: 'html,ts'"
+            [description]="withValidatorDescription"
+        >
+            <ng-template #withValidatorDescription>
+                Create custom validator function to verify input value. Custom
+                <code>completeDateTimeValidator</code>
+                using to check if data is complete
+            </ng-template>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>