diff --git a/projects/cdk/abstract/control.ts b/projects/cdk/abstract/control.ts
index f001b14e874c..68864941030b 100644
--- a/projects/cdk/abstract/control.ts
+++ b/projects/cdk/abstract/control.ts
@@ -1,6 +1,13 @@
 /// <reference types="@taiga-ui/tsconfig/ng-dev-mode" />
 import type {OnDestroy, OnInit, Provider, Type} from '@angular/core';
-import {ChangeDetectorRef, Directive, HostBinding, inject, Input} from '@angular/core';
+import {
+    ChangeDetectorRef,
+    DestroyRef,
+    Directive,
+    HostBinding,
+    inject,
+    Input,
+} from '@angular/core';
 import type {AbstractControl, ControlValueAccessor} from '@angular/forms';
 import {NgControl, NgModel} from '@angular/forms';
 import {EMPTY_FUNCTION} from '@taiga-ui/cdk/constants';
@@ -43,7 +50,9 @@ export abstract class AbstractTuiControl<T>
     protected onTouched = EMPTY_FUNCTION;
     protected onChange = EMPTY_FUNCTION;
     protected readonly fallbackValue = this.getFallbackValue();
+    // TODO: remove after migrating to takeUntilDestroyed()
     protected readonly destroy$ = new Subject<void>();
+    protected destroyRef = inject(DestroyRef);
     protected readonly cdr = inject(ChangeDetectorRef);
     protected readonly valueTransformer = inject<TuiControlValueTransformer<T>>(
         AbstractTuiValueTransformer,
diff --git a/projects/cdk/date-time/date-format.ts b/projects/cdk/date-time/date-format.ts
deleted file mode 100644
index 39bae9531c35..000000000000
--- a/projects/cdk/date-time/date-format.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type {TuiDateMode} from '@taiga-ui/cdk/types';
-import {tuiCreateToken} from '@taiga-ui/cdk/utils';
-
-/**
- * Active date format for Taiga UI
- */
-export const TUI_DATE_FORMAT = tuiCreateToken<TuiDateMode>('DMY');
diff --git a/projects/cdk/date-time/index.ts b/projects/cdk/date-time/index.ts
index d1db4a776261..f045dfab66c5 100644
--- a/projects/cdk/date-time/index.ts
+++ b/projects/cdk/date-time/index.ts
@@ -1,7 +1,5 @@
 export * from './date-clamp';
 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/cdk/date-time/date-separator.ts b/projects/cdk/utils/miscellaneous/change-date-separator.ts
similarity index 52%
rename from projects/cdk/date-time/date-separator.ts
rename to projects/cdk/utils/miscellaneous/change-date-separator.ts
index 336df324ebcf..933c59897463 100644
--- a/projects/cdk/date-time/date-separator.ts
+++ b/projects/cdk/utils/miscellaneous/change-date-separator.ts
@@ -1,10 +1,4 @@
-import {tuiCreateToken} from '@taiga-ui/cdk/utils';
-
-/**
- * Date separator for Taiga UI components
- */
-export const TUI_DATE_SEPARATOR = tuiCreateToken('.');
-
+/* internal */
 export const changeDateSeparator = (
     dateString: string,
     newDateSeparator: string,
diff --git a/projects/cdk/utils/miscellaneous/index.ts b/projects/cdk/utils/miscellaneous/index.ts
index a40af52483bf..c3674139f93c 100644
--- a/projects/cdk/utils/miscellaneous/index.ts
+++ b/projects/cdk/utils/miscellaneous/index.ts
@@ -1,6 +1,7 @@
 export * from './array-remove';
 export * from './array-shallow-equals';
 export * from './array-toggle';
+export * from './change-date-separator';
 export * from './clean-object';
 export * from './create-options';
 export * from './create-token';
diff --git a/projects/core/constants/default-date-format.ts b/projects/core/constants/default-date-format.ts
new file mode 100644
index 000000000000..a6275a11f64a
--- /dev/null
+++ b/projects/core/constants/default-date-format.ts
@@ -0,0 +1,6 @@
+import type {TuiDateFormatSettings} from '@taiga-ui/core/interfaces';
+
+export const TUI_DEFAULT_DATE_FORMAT: TuiDateFormatSettings = {
+    mode: 'DMY',
+    separator: '.',
+};
diff --git a/projects/core/constants/index.ts b/projects/core/constants/index.ts
index 66d05bac8bf3..fa286f446e9a 100644
--- a/projects/core/constants/index.ts
+++ b/projects/core/constants/index.ts
@@ -1,5 +1,6 @@
 export * from './cache-basting-payload';
 export * from './decimal-symbols';
+export * from './default-date-format';
 export * from './default-icons-path';
 export * from './default-marker-handler';
 export * from './default-number-format';
diff --git a/projects/core/directives/date-format/date-format.directive.ts b/projects/core/directives/date-format/date-format.directive.ts
new file mode 100644
index 000000000000..a7785fa14ff0
--- /dev/null
+++ b/projects/core/directives/date-format/date-format.directive.ts
@@ -0,0 +1,32 @@
+import {Directive, forwardRef, inject, Input} from '@angular/core';
+import type {TuiDateFormatSettings} from '@taiga-ui/core/interfaces';
+import {TUI_DATE_FORMAT} from '@taiga-ui/core/tokens';
+import {combineLatest, map, Observable, ReplaySubject} from 'rxjs';
+
+@Directive({
+    standalone: true,
+    selector: '[tuiDateFormat]',
+    providers: [
+        {
+            provide: TUI_DATE_FORMAT,
+            useExisting: forwardRef(() => TuiDateFormatDirective),
+        },
+    ],
+})
+export class TuiDateFormatDirective extends Observable<TuiDateFormatSettings> {
+    private readonly settings = new ReplaySubject<Partial<TuiDateFormatSettings>>(1);
+    private readonly parent = inject(TUI_DATE_FORMAT, {skipSelf: true});
+
+    constructor() {
+        super(subscriber =>
+            combineLatest([this.parent, this.settings])
+                .pipe(map(([parent, settings]) => ({...parent, ...settings})))
+                .subscribe(subscriber),
+        );
+    }
+
+    @Input()
+    public set tuiDateFormat(format: Partial<TuiDateFormatSettings>) {
+        this.settings.next(format);
+    }
+}
diff --git a/projects/core/directives/date-format/index.ts b/projects/core/directives/date-format/index.ts
new file mode 100644
index 000000000000..cfa8db64400b
--- /dev/null
+++ b/projects/core/directives/date-format/index.ts
@@ -0,0 +1 @@
+export * from './date-format.directive';
diff --git a/projects/core/directives/date-format/ng-package.json b/projects/core/directives/date-format/ng-package.json
new file mode 100644
index 000000000000..bebf62dcb5e5
--- /dev/null
+++ b/projects/core/directives/date-format/ng-package.json
@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}
diff --git a/projects/core/directives/index.ts b/projects/core/directives/index.ts
index d46b8bc0c2af..fb016402c634 100644
--- a/projects/core/directives/index.ts
+++ b/projects/core/directives/index.ts
@@ -1,4 +1,5 @@
 export * from '@taiga-ui/core/directives/appearance';
+export * from '@taiga-ui/core/directives/date-format';
 export * from '@taiga-ui/core/directives/dropdown';
 export * from '@taiga-ui/core/directives/hint';
 export * from '@taiga-ui/core/directives/icons';
diff --git a/projects/core/directives/number-format/index.ts b/projects/core/directives/number-format/index.ts
index 48d886ff55c0..39bc0f19ec37 100644
--- a/projects/core/directives/number-format/index.ts
+++ b/projects/core/directives/number-format/index.ts
@@ -1,2 +1 @@
 export * from './number-format.directive';
-export * from './number-format.module';
diff --git a/projects/core/directives/number-format/number-format.directive.ts b/projects/core/directives/number-format/number-format.directive.ts
index 365d6b2743b9..424f44ba61a9 100644
--- a/projects/core/directives/number-format/number-format.directive.ts
+++ b/projects/core/directives/number-format/number-format.directive.ts
@@ -4,6 +4,7 @@ import {TUI_NUMBER_FORMAT} from '@taiga-ui/core/tokens';
 import {combineLatest, map, Observable, ReplaySubject} from 'rxjs';
 
 @Directive({
+    standalone: true,
     selector: '[tuiNumberFormat]',
     providers: [
         {
diff --git a/projects/core/directives/number-format/number-format.module.ts b/projects/core/directives/number-format/number-format.module.ts
deleted file mode 100644
index 5929a695775a..000000000000
--- a/projects/core/directives/number-format/number-format.module.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {NgModule} from '@angular/core';
-
-import {TuiNumberFormatDirective} from './number-format.directive';
-
-@NgModule({
-    declarations: [TuiNumberFormatDirective],
-    exports: [TuiNumberFormatDirective],
-})
-export class TuiNumberFormatModule {}
diff --git a/projects/core/interfaces/date-format-settings.ts b/projects/core/interfaces/date-format-settings.ts
new file mode 100644
index 000000000000..ef4759d8c248
--- /dev/null
+++ b/projects/core/interfaces/date-format-settings.ts
@@ -0,0 +1,16 @@
+import type {TuiDateMode} from '@taiga-ui/cdk';
+
+/**
+ * Formatting configuration for displayed dates
+ */
+export interface TuiDateFormatSettings {
+    /**
+     * Date format mode.
+     */
+    readonly mode: TuiDateMode;
+    /**
+     * Separator between date segments
+     * @example 10.02 ('.' by default)
+     */
+    readonly separator: string;
+}
diff --git a/projects/core/interfaces/index.ts b/projects/core/interfaces/index.ts
index 0fcc05e41d2e..c2a55e1685ca 100644
--- a/projects/core/interfaces/index.ts
+++ b/projects/core/interfaces/index.ts
@@ -1,5 +1,6 @@
 export * from './data-list-accessor';
 export * from './data-list-host';
+export * from './date-format-settings';
 export * from './icon-error';
 export * from './media';
 export * from './number-format-settings';
diff --git a/projects/core/tokens/date-format.ts b/projects/core/tokens/date-format.ts
new file mode 100644
index 000000000000..eff5679bbbd2
--- /dev/null
+++ b/projects/core/tokens/date-format.ts
@@ -0,0 +1,26 @@
+import type {InjectionToken, Provider} from '@angular/core';
+import {Optional, SkipSelf} from '@angular/core';
+import {tuiCreateToken} from '@taiga-ui/cdk';
+import {TUI_DEFAULT_DATE_FORMAT} from '@taiga-ui/core/constants';
+import type {TuiDateFormatSettings} from '@taiga-ui/core/interfaces';
+import type {Observable} from 'rxjs';
+import {map, of} from 'rxjs';
+
+/**
+ * Formatting configuration for displayed dates
+ */
+export const TUI_DATE_FORMAT: InjectionToken<Observable<TuiDateFormatSettings>> =
+    tuiCreateToken(of(TUI_DEFAULT_DATE_FORMAT));
+
+export function tuiDateFormatProvider(options: Partial<TuiDateFormatSettings>): Provider {
+    return {
+        provide: TUI_DATE_FORMAT,
+        deps: [[new Optional(), new SkipSelf(), TUI_DATE_FORMAT]],
+        useFactory: (
+            parent: Observable<TuiDateFormatSettings> | null,
+        ): Observable<TuiDateFormatSettings> =>
+            (parent || of(TUI_DEFAULT_DATE_FORMAT)).pipe(
+                map(format => ({...format, ...options})),
+            ),
+    };
+}
diff --git a/projects/core/tokens/index.ts b/projects/core/tokens/index.ts
index c30252c9583d..535fc29a41d3 100644
--- a/projects/core/tokens/index.ts
+++ b/projects/core/tokens/index.ts
@@ -3,6 +3,7 @@ export * from './assert-enabled';
 export * from './common-icon';
 export * from './data-list-accessor';
 export * from './data-list-host';
+export * from './date-format';
 export * from './day-type-handler';
 export * from './document-or-shadow-root';
 export * from './element-ref';
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index b05d90e5f820..3bfbc5887661 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -618,15 +618,11 @@ export const ROUTES: Routes = [
             title: 'Input',
         },
     },
-    {
+    route({
         path: 'components/input-date',
-        loadChildren: async () =>
-            (await import('../components/input-date/input-date.module'))
-                .ExampleTuiInputDateModule,
-        data: {
-            title: 'InputDate',
-        },
-    },
+        title: 'InputDate',
+        loadComponent: async () => import('../components/input-date'),
+    }),
     {
         path: 'components/input-date-multi',
         loadChildren: async () =>
@@ -1781,8 +1777,12 @@ export const ROUTES: Routes = [
     route({
         path: 'directives/number-format',
         title: 'NumberFormat',
-        loadComponent: async () =>
-            import('../directives/number-format/number-format.component'),
+        loadComponent: async () => import('../directives/number-format'),
+    }),
+    route({
+        path: 'directives/date-format',
+        title: 'NumberFormat',
+        loadComponent: async () => import('../directives/date-format'),
     }),
 
     // UTILS
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
index 00378e9edc36..5c3d0be21e94 100644
--- a/projects/demo/src/modules/app/pages.ts
+++ b/projects/demo/src/modules/app/pages.ts
@@ -1346,6 +1346,13 @@ export const pages: TuiDocPages = [
                 keywords: 'number, format, число, separator, precision, rounding, формат',
                 route: '/directives/number-format',
             },
+            {
+                section: 'Tools',
+                title: 'DateFormat',
+                keywords:
+                    'date, format, дата, separator, год, year, month, месяц, день, day, формат',
+                route: '/directives/date-format',
+            },
             {
                 section: 'Tools',
                 title: 'Touchable',
diff --git a/projects/demo/src/modules/components/abstract/number-format-documentation/number-format-documentation.template.html b/projects/demo/src/modules/components/abstract/number-format-documentation/number-format-documentation.template.html
index d7b32b66215d..3b06564a31b9 100644
--- a/projects/demo/src/modules/components/abstract/number-format-documentation/number-format-documentation.template.html
+++ b/projects/demo/src/modules/components/abstract/number-format-documentation/number-format-documentation.template.html
@@ -17,7 +17,7 @@ <h6 class="tui-text_h6">
 </p>
 <p>
     Requires you to import
-    <code>TuiNumberFormatModule</code>
+    <code>TuiNumberFormatDirective</code>
     .
 </p>
 
diff --git a/projects/demo/src/modules/components/dialog/dialog.module.ts b/projects/demo/src/modules/components/dialog/dialog.module.ts
index 0d1d9618f31c..9d52b04f6061 100644
--- a/projects/demo/src/modules/components/dialog/dialog.module.ts
+++ b/projects/demo/src/modules/components/dialog/dialog.module.ts
@@ -17,7 +17,7 @@ import {
     TuiLinkModule,
     TuiLoaderModule,
     TuiNotificationModule,
-    TuiNumberFormatModule,
+    TuiNumberFormatDirective,
     TuiSvgModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
@@ -73,7 +73,7 @@ import {TuiDialogExampleComponent10} from './examples/10';
         PayExampleModalModule,
         TuiTextfieldControllerModule,
         TuiTextCodeModule,
-        TuiNumberFormatModule,
+        TuiNumberFormatDirective,
     ],
     declarations: [
         ExampleTuiDialogComponent,
diff --git a/projects/demo/src/modules/components/input-date-range/examples/3/index.ts b/projects/demo/src/modules/components/input-date-range/examples/3/index.ts
index e4fecdfbdc3c..b1e368dfbf3a 100644
--- a/projects/demo/src/modules/components/input-date-range/examples/3/index.ts
+++ b/projects/demo/src/modules/components/input-date-range/examples/3/index.ts
@@ -2,17 +2,15 @@ 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, TuiDayRange} from '@taiga-ui/cdk';
+import {TuiDay, TuiDayRange} from '@taiga-ui/cdk';
+import {tuiDateFormatProvider} from '@taiga-ui/core';
 
 @Component({
     selector: 'tui-input-date-range-example-3',
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
-    providers: [
-        {provide: TUI_DATE_FORMAT, useValue: 'YMD'},
-        {provide: TUI_DATE_SEPARATOR, useValue: '/'},
-    ],
+    providers: [tuiDateFormatProvider({mode: 'YMD', separator: '/'})],
 })
 export class TuiInputDateRangeExample3 {
     protected readonly control = new FormControl(
diff --git a/projects/demo/src/modules/components/input-date-range/input-date-range.template.html b/projects/demo/src/modules/components/input-date-range/input-date-range.template.html
index 6bfac910d730..a090a5535891 100644
--- a/projects/demo/src/modules/components/input-date-range/input-date-range.template.html
+++ b/projects/demo/src/modules/components/input-date-range/input-date-range.template.html
@@ -9,21 +9,17 @@
             is a field to input a range of dates.
         </p>
 
-        <h3>DI-tokens for date localization:</h3>
-        <dl>
-            <dt>
-                <code>TUI_DATE_FORMAT</code>
-            </dt>
-            <dd class="tui-space_bottom-5">
-                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>
+        <p>
+            Date formatting can be customized with
+            <a
+                fragment="date-format"
+                routerLink="/utils/tokens"
+                tuiLink
+            >
+                TUI_DATE_FORMAT
+            </a>
+            token.
+        </p>
         <p class="tui-space_bottom-9">
             <a
                 fragment="date-localization"
diff --git a/projects/demo/src/modules/components/input-date-time/examples/3/index.ts b/projects/demo/src/modules/components/input-date-time/examples/3/index.ts
index de675bbafbb1..2580b5648912 100644
--- a/projects/demo/src/modules/components/input-date-time/examples/3/index.ts
+++ b/projects/demo/src/modules/components/input-date-time/examples/3/index.ts
@@ -2,17 +2,15 @@ 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, TuiTime} from '@taiga-ui/cdk';
+import {TuiDay, TuiTime} from '@taiga-ui/cdk';
+import {tuiDateFormatProvider} from '@taiga-ui/core';
 
 @Component({
     selector: 'tui-input-date-time-example-3',
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
-    providers: [
-        {provide: TUI_DATE_FORMAT, useValue: 'YMD'},
-        {provide: TUI_DATE_SEPARATOR, useValue: '/'},
-    ],
+    providers: [tuiDateFormatProvider({mode: 'YMD', separator: '/'})],
 })
 export class TuiInputDateTimeExample3 {
     protected readonly control = new FormControl([
diff --git a/projects/demo/src/modules/components/input-date-time/input-date-time.template.html b/projects/demo/src/modules/components/input-date-time/input-date-time.template.html
index 14884c629f9d..c1bcb7d52e5e 100644
--- a/projects/demo/src/modules/components/input-date-time/input-date-time.template.html
+++ b/projects/demo/src/modules/components/input-date-time/input-date-time.template.html
@@ -9,21 +9,17 @@
             allows to input date and time
         </div>
 
-        <h3>DI-tokens for date localization:</h3>
-        <dl>
-            <dt>
-                <code>TUI_DATE_FORMAT</code>
-            </dt>
-            <dd class="tui-space_bottom-5">
-                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>
+        <p>
+            Date formatting can be customized with
+            <a
+                fragment="date-format"
+                routerLink="/utils/tokens"
+                tuiLink
+            >
+                TUI_DATE_FORMAT
+            </a>
+            token.
+        </p>
         <p class="tui-space_bottom-9">
             <a
                 fragment="date-localization"
diff --git a/projects/demo/src/modules/components/input-date/examples/1/index.ts b/projects/demo/src/modules/components/input-date/examples/1/index.ts
index 2a0db4f7b7bc..8226e836f80d 100644
--- a/projects/demo/src/modules/components/input-date/examples/1/index.ts
+++ b/projects/demo/src/modules/components/input-date/examples/1/index.ts
@@ -1,16 +1,27 @@
+import {AsyncPipe} from '@angular/common';
 import {Component} from '@angular/core';
-import {FormControl, FormGroup} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiDay} from '@taiga-ui/cdk';
+import {TuiErrorModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiFieldErrorPipeModule, TuiInputDateModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-input-date-example-1',
+    standalone: true,
+    imports: [
+        TuiInputDateModule,
+        TuiErrorModule,
+        TuiTextfieldControllerModule,
+        TuiFieldErrorPipeModule,
+        ReactiveFormsModule,
+        AsyncPipe,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputDateExample1 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl(new TuiDay(2017, 0, 15)),
     });
diff --git a/projects/demo/src/modules/components/input-date/examples/2/index.ts b/projects/demo/src/modules/components/input-date/examples/2/index.ts
index cf37e2b26c84..45dcd9d61839 100644
--- a/projects/demo/src/modules/components/input-date/examples/2/index.ts
+++ b/projects/demo/src/modules/components/input-date/examples/2/index.ts
@@ -1,16 +1,19 @@
 import {Component} from '@angular/core';
-import {FormControl, FormGroup} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiDay} from '@taiga-ui/cdk';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputDateModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-input-date-example-2',
+    standalone: true,
+    imports: [TuiInputDateModule, TuiTextfieldControllerModule, ReactiveFormsModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputDateExample2 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl(new TuiDay(2017, 2, 15)),
     });
diff --git a/projects/demo/src/modules/components/input-date/examples/3/index.ts b/projects/demo/src/modules/components/input-date/examples/3/index.ts
index 5a81fea33c4a..104ae54a03d8 100644
--- a/projects/demo/src/modules/components/input-date/examples/3/index.ts
+++ b/projects/demo/src/modules/components/input-date/examples/3/index.ts
@@ -1,16 +1,18 @@
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TUI_LAST_DAY, TuiDay} from '@taiga-ui/cdk';
-import {TuiNamedDay} from '@taiga-ui/kit';
+import {TuiInputDateModule, TuiNamedDay} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-input-date-example-3',
+    standalone: true,
+    imports: [TuiInputDateModule, FormsModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputDateExample3 {
+export default class ExampleComponent {
     protected from: TuiDay | null = null;
     protected to: TuiDay | null = null;
     protected min = new TuiDay(2017, 9, 4);
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
index 840d87207b6c..a0312560714e 100644
--- a/projects/demo/src/modules/components/input-date/examples/4/index.ts
+++ b/projects/demo/src/modules/components/input-date/examples/4/index.ts
@@ -1,19 +1,19 @@
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {FormControl, ReactiveFormsModule} 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';
+import {TuiDay} from '@taiga-ui/cdk';
+import {tuiDateFormatProvider, TuiNotificationModule} from '@taiga-ui/core';
+import {TuiInputDateModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-input-date-example-4',
+    standalone: true,
+    imports: [TuiNotificationModule, TuiInputDateModule, ReactiveFormsModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
-    providers: [
-        {provide: TUI_DATE_FORMAT, useValue: 'YMD'},
-        {provide: TUI_DATE_SEPARATOR, useValue: '/'},
-    ],
+    providers: [tuiDateFormatProvider({mode: 'YMD', separator: '/'})],
 })
-export class TuiInputDateExample4 {
+export default class ExampleComponent {
     protected readonly control = new FormControl(new TuiDay(2017, 0, 15));
 }
diff --git a/projects/demo/src/modules/components/input-date/examples/5/index.ts b/projects/demo/src/modules/components/input-date/examples/5/index.ts
index 89805b0f29e7..b076d8488f71 100644
--- a/projects/demo/src/modules/components/input-date/examples/5/index.ts
+++ b/projects/demo/src/modules/components/input-date/examples/5/index.ts
@@ -1,16 +1,24 @@
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiDay} from '@taiga-ui/cdk';
+import {TuiInputDateModule} from '@taiga-ui/kit';
+
+import {ExampleNativeDateTransformerDirective} from './native-date-transformer.directive';
 
 @Component({
-    selector: 'tui-input-date-example-5',
+    standalone: true,
+    imports: [
+        TuiInputDateModule,
+        ReactiveFormsModule,
+        ExampleNativeDateTransformerDirective,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiInputDateExample5 {
+export default class ExampleComponent {
     protected readonly nativeDateControl = new FormControl(new Date(2022, 0, 26));
     protected readonly defaultControl = new FormControl(new TuiDay(2022, 0, 26));
 }
diff --git a/projects/demo/src/modules/components/input-date/examples/5/native-date-transformer.directive.ts b/projects/demo/src/modules/components/input-date/examples/5/native-date-transformer.directive.ts
index 50a6f87f995c..4d617a44d531 100644
--- a/projects/demo/src/modules/components/input-date/examples/5/native-date-transformer.directive.ts
+++ b/projects/demo/src/modules/components/input-date/examples/5/native-date-transformer.directive.ts
@@ -18,6 +18,7 @@ class ExampleTransformer extends AbstractTuiValueTransformer<From, To> {
 }
 
 @Directive({
+    standalone: true,
     selector: 'tui-input-date[toNativeDate]',
     providers: [
         {
diff --git a/projects/demo/src/modules/components/input-date/examples/6/index.ts b/projects/demo/src/modules/components/input-date/examples/6/index.ts
index 2c7dc1c80a7c..3c40ab4ce130 100644
--- a/projects/demo/src/modules/components/input-date/examples/6/index.ts
+++ b/projects/demo/src/modules/components/input-date/examples/6/index.ts
@@ -1,18 +1,20 @@
 import {Component} from '@angular/core';
-import {FormControl, FormGroup} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiDay} from '@taiga-ui/cdk';
-import {tuiInputDateOptionsProvider} from '@taiga-ui/kit';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiInputDateModule, tuiInputDateOptionsProvider} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-input-date-example-6',
+    standalone: true,
+    imports: [TuiInputDateModule, ReactiveFormsModule, TuiTextfieldControllerModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
     providers: [tuiInputDateOptionsProvider({nativePicker: true})],
 })
-export class TuiInputDateExample6 {
+export default class ExampleComponent {
     protected readonly testForm = new FormGroup({
         testValue: new FormControl(new TuiDay(2017, 0, 15)),
     });
diff --git a/projects/demo/src/modules/components/input-date/examples/7/index.html b/projects/demo/src/modules/components/input-date/examples/7/index.html
new file mode 100644
index 000000000000..dee9cf59edd0
--- /dev/null
+++ b/projects/demo/src/modules/components/input-date/examples/7/index.html
@@ -0,0 +1,3 @@
+<form [formGroup]="testForm">
+    <tui-input-date formControlName="testValue">Choose a date</tui-input-date>
+</form>
diff --git a/projects/demo/src/modules/components/input-date/examples/7/index.ts b/projects/demo/src/modules/components/input-date/examples/7/index.ts
new file mode 100644
index 000000000000..5db57c7c73bb
--- /dev/null
+++ b/projects/demo/src/modules/components/input-date/examples/7/index.ts
@@ -0,0 +1,39 @@
+import {Component} from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiDay} from '@taiga-ui/cdk';
+import {TUI_DATE_FORMAT, TUI_DEFAULT_DATE_FORMAT} from '@taiga-ui/core';
+import type {TuiLanguage} from '@taiga-ui/i18n';
+import {TUI_LANGUAGE} from '@taiga-ui/i18n';
+import {TuiInputDateModule} from '@taiga-ui/kit';
+import type {BehaviorSubject, Observable} from 'rxjs';
+import {map, switchMap} from 'rxjs';
+
+@Component({
+    standalone: true,
+    imports: [TuiInputDateModule, ReactiveFormsModule],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+    providers: [
+        {
+            provide: TUI_DATE_FORMAT,
+            deps: [TUI_LANGUAGE],
+            useFactory: (lang: BehaviorSubject<Observable<TuiLanguage>>) =>
+                lang.pipe(
+                    switchMap(lang => lang),
+                    map(({name}) => ({
+                        ...TUI_DEFAULT_DATE_FORMAT,
+                        mode: name === 'english' ? 'MDY' : 'DMY',
+                        separator: name === 'english' ? '/' : '.',
+                    })),
+                ),
+        },
+    ],
+})
+export default class ExampleComponent {
+    protected readonly testForm = new FormGroup({
+        testValue: new FormControl(new TuiDay(2017, 0, 15)),
+    });
+}
diff --git a/projects/demo/src/modules/components/input-date/examples/import/declare-form.md b/projects/demo/src/modules/components/input-date/examples/import/declare-form.md
deleted file mode 100644
index f301bf2024e9..000000000000
--- a/projects/demo/src/modules/components/input-date/examples/import/declare-form.md
+++ /dev/null
@@ -1,12 +0,0 @@
-```ts
-import {FormControl, FormGroup} from '@angular/forms';
-
-@Component({
-  // ...
-})
-export class MyComponent {
-  testForm = new FormGroup({
-    testValue: new FormControl(),
-  });
-}
-```
diff --git a/projects/demo/src/modules/components/input-date/examples/import/import-module.md b/projects/demo/src/modules/components/input-date/examples/import/import.md
similarity index 76%
rename from projects/demo/src/modules/components/input-date/examples/import/import-module.md
rename to projects/demo/src/modules/components/input-date/examples/import/import.md
index 8cdbc4a3936f..2cbf17d0193d 100644
--- a/projects/demo/src/modules/components/input-date/examples/import/import-module.md
+++ b/projects/demo/src/modules/components/input-date/examples/import/import.md
@@ -2,7 +2,8 @@
 import {ReactiveFormsModule} from '@angular/forms';
 import {TuiInputDateModule} from '@taiga-ui/kit';
 
-@NgModule({
+@Component({
+  standalone: true,
   imports: [
     // ...
     ReactiveFormsModule,
@@ -10,5 +11,5 @@ import {TuiInputDateModule} from '@taiga-ui/kit';
   ],
   // ...
 })
-export class MyModule {}
+export class MyComponent {}
 ```
diff --git a/projects/demo/src/modules/components/input-date/examples/import/insert-template.md b/projects/demo/src/modules/components/input-date/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/components/input-date/examples/import/insert-template.md
rename to projects/demo/src/modules/components/input-date/examples/import/template.md
diff --git a/projects/demo/src/modules/components/input-date/input-date.template.html b/projects/demo/src/modules/components/input-date/index.html
similarity index 77%
rename from projects/demo/src/modules/components/input-date/input-date.template.html
rename to projects/demo/src/modules/components/input-date/index.html
index a546a932f730..58a6f655641c 100644
--- a/projects/demo/src/modules/components/input-date/input-date.template.html
+++ b/projects/demo/src/modules/components/input-date/index.html
@@ -9,21 +9,18 @@
             – input with a calendar.
         </div>
 
-        <h3>DI-tokens for date localization:</h3>
-        <dl>
-            <dt>
-                <code>TUI_DATE_FORMAT</code>
-            </dt>
-            <dd class="tui-space_bottom-5">
-                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>
+        <p>
+            Date formatting can be customized with
+            <a
+                fragment="date-format"
+                routerLink="/utils/tokens"
+                tuiLink
+            >
+                TUI_DATE_FORMAT
+            </a>
+            token.
+        </p>
+
         <p class="tui-space_bottom-9">
             <a
                 fragment="date-localization"
@@ -76,50 +73,51 @@ <h3>DI-tokens for input-configurations:</h3>
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
-        >
-            <tui-input-date-example-1 />
-        </tui-doc-example>
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="sizes"
             heading="sizes"
-            [content]="example2"
-        >
-            <tui-input-date-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="named"
             heading="With named dates"
-            [content]="example3"
-        >
-            <tui-input-date-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="date-localization"
             heading="Date localization"
-            [content]="example4"
-        >
-            <tui-input-date-example-4 />
-        </tui-doc-example>
+            [component]="4 | tuiComponent"
+            [content]="4 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="native-date-output"
             heading="With native Date output"
+            [component]="5 | tuiComponent"
             [content]="example5"
-        >
-            <tui-input-date-example-5 />
-        </tui-doc-example>
+        />
 
         <tui-doc-example
             id="native-input-date"
             heading="Native input date"
-            [content]="example6"
-        >
-            <tui-input-date-example-6 />
-        </tui-doc-example>
+            [component]="6 | tuiComponent"
+            [content]="6 | tuiExample: 'html,ts'"
+        />
+
+        <tui-doc-example
+            id="dynamic-date-format"
+            heading="Dynamic date format"
+            [component]="7 | tuiComponent"
+            [content]="7 | tuiExample: 'html,ts'"
+        />
     </ng-template>
 
     <ng-template pageTab>
@@ -246,46 +244,6 @@ <h3>DI-tokens for input-configurations:</h3>
                 tui-root
             </a>
         </p>
-
-        <ol class="b-demo-steps">
-            <li>
-                <p>
-                    Import an Angular module for forms and
-                    <code>TuiInputDateModule</code>
-                    in the same module where you want to use our component:
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li>
-                <p>
-                    Declare a form (
-                    <code>FormGroup</code>
-                    ) or a control (
-                    <code>FormControl</code>
-                    ) in your component:
-                </p>
-
-                <tui-doc-code
-                    filename="my.component.ts"
-                    [code]="exampleForm"
-                />
-            </li>
-
-            <li>
-                Use
-                <code>TuiInputDate</code>
-                in template:
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                />
-            </li>
-        </ol>
+        <tui-setup />
     </ng-template>
 </tui-doc-page>
diff --git a/projects/demo/src/modules/components/input-date/input-date.component.ts b/projects/demo/src/modules/components/input-date/index.ts
similarity index 60%
rename from projects/demo/src/modules/components/input-date/input-date.component.ts
rename to projects/demo/src/modules/components/input-date/index.ts
index cbc575f79db0..d7c50126e254 100644
--- a/projects/demo/src/modules/components/input-date/input-date.component.ts
+++ b/projects/demo/src/modules/components/input-date/index.ts
@@ -1,61 +1,57 @@
 import {Component, forwardRef} from '@angular/core';
-import {FormControl, Validators} from '@angular/forms';
+import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
+import {RouterLink} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemoModule} from '@demo/utils';
 import type {TuiDocExample} from '@taiga-ui/addon-doc';
+import {TuiMobileCalendarDialogModule} from '@taiga-ui/addon-mobile';
 import type {TuiBooleanHandler} from '@taiga-ui/cdk';
 import {TUI_FALSE_HANDLER, TUI_FIRST_DAY, TUI_LAST_DAY, TuiDay} from '@taiga-ui/cdk';
 import type {TuiMarkerHandler} from '@taiga-ui/core';
-import {TUI_DEFAULT_MARKER_HANDLER} from '@taiga-ui/core';
-import {TuiNamedDay} from '@taiga-ui/kit';
+import {
+    TUI_DEFAULT_MARKER_HANDLER,
+    TuiDropdownModule,
+    TuiHintModule,
+    TuiLinkModule,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {TuiInputDateModule, TuiNamedDay} from '@taiga-ui/kit';
 
 import {AbstractExampleTuiControl} from '../abstract/control';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
+import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module';
 
 const TWO_DOTS: [string, string] = ['var(--tui-primary)', 'var(--tui-info-fill)'];
 const ONE_DOT: [string] = ['var(--tui-success-fill)'];
 
 @Component({
-    selector: 'example-tui-input-date',
-    templateUrl: './input-date.template.html',
+    standalone: true,
+    imports: [
+        TuiDemoModule,
+        TuiInputDateModule,
+        TuiTextfieldControllerModule,
+        TuiMobileCalendarDialogModule,
+        TuiDropdownModule,
+        TuiHintModule,
+        TuiLinkModule,
+        ReactiveFormsModule,
+        InheritedDocumentationModule,
+        RouterLink,
+    ],
+    templateUrl: './index.html',
     changeDetection,
     providers: [
         {
             provide: ABSTRACT_PROPS_ACCESSOR,
-            useExisting: forwardRef(() => ExampleTuiInputDateComponent),
+            useExisting: forwardRef(() => ExampleComponent),
         },
     ],
 })
-export class ExampleTuiInputDateComponent extends AbstractExampleTuiControl {
+export default class ExampleComponent extends AbstractExampleTuiControl {
     public override cleaner = false;
 
     public control = new FormControl<TuiDay | null>(null, Validators.required);
 
-    protected readonly exampleForm = import('./examples/import/declare-form.md?raw');
-
-    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
-
-    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-
-    protected readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-    };
-
-    protected readonly example2: TuiDocExample = {
-        TypeScript: import('./examples/2/index.ts?raw'),
-        HTML: import('./examples/2/index.html?raw'),
-    };
-
-    protected readonly example3: TuiDocExample = {
-        TypeScript: import('./examples/3/index.ts?raw'),
-        HTML: import('./examples/3/index.html?raw'),
-    };
-
-    protected readonly example4: TuiDocExample = {
-        TypeScript: import('./examples/4/index.ts?raw'),
-        HTML: import('./examples/4/index.html?raw'),
-    };
-
     protected readonly example5: TuiDocExample = {
         TypeScript: import('./examples/5/index.ts?raw'),
         HTML: import('./examples/5/index.html?raw'),
@@ -64,11 +60,6 @@ export class ExampleTuiInputDateComponent extends AbstractExampleTuiControl {
         ),
     };
 
-    protected readonly example6: TuiDocExample = {
-        TypeScript: import('./examples/6/index.ts?raw'),
-        HTML: import('./examples/6/index.html?raw'),
-    };
-
     protected minVariants = [
         TUI_FIRST_DAY,
         new TuiDay(2017, 2, 5),
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
deleted file mode 100644
index a9fc4e7278f1..000000000000
--- a/projects/demo/src/modules/components/input-date/input-date.module.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiMobileCalendarDialogModule} from '@taiga-ui/addon-mobile';
-import {
-    TuiButtonModule,
-    TuiDropdownModule,
-    TuiErrorModule,
-    TuiHintModule,
-    TuiLinkModule,
-    TuiNotificationModule,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
-import {
-    TuiFieldErrorPipeModule,
-    TuiInputDateModule,
-    TuiRadioListModule,
-    TuiUnfinishedValidatorModule,
-} from '@taiga-ui/kit';
-
-import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module';
-import {TuiInputDateExample1} from './examples/1';
-import {TuiInputDateExample2} from './examples/2';
-import {TuiInputDateExample3} from './examples/3';
-import {TuiInputDateExample4} from './examples/4';
-import {TuiInputDateExample5} from './examples/5';
-import {ExampleNativeDateTransformerDirective} from './examples/5/native-date-transformer.directive';
-import {TuiInputDateExample6} from './examples/6';
-import {ExampleTuiInputDateComponent} from './input-date.component';
-
-@NgModule({
-    imports: [
-        TuiAddonDocModule,
-        InheritedDocumentationModule,
-        ReactiveFormsModule,
-        FormsModule,
-        CommonModule,
-        TuiLinkModule,
-        TuiRadioListModule,
-        TuiButtonModule,
-        TuiInputDateModule,
-        TuiMobileCalendarDialogModule,
-        TuiUnfinishedValidatorModule,
-        TuiTextfieldControllerModule,
-        TuiHintModule,
-        TuiErrorModule,
-        TuiFieldErrorPipeModule,
-        TuiNotificationModule,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiInputDateComponent)),
-        TuiDropdownModule,
-    ],
-    declarations: [
-        ExampleTuiInputDateComponent,
-        TuiInputDateExample1,
-        TuiInputDateExample2,
-        TuiInputDateExample3,
-        TuiInputDateExample4,
-        TuiInputDateExample5,
-        TuiInputDateExample6,
-        ExampleNativeDateTransformerDirective,
-    ],
-    exports: [ExampleTuiInputDateComponent],
-})
-export class ExampleTuiInputDateModule {}
diff --git a/projects/demo/src/modules/components/input-number/input-number.module.ts b/projects/demo/src/modules/components/input-number/input-number.module.ts
index d93bb682e731..63bc686d8372 100644
--- a/projects/demo/src/modules/components/input-number/input-number.module.ts
+++ b/projects/demo/src/modules/components/input-number/input-number.module.ts
@@ -9,7 +9,7 @@ import {
     TuiHintModule,
     TuiLinkModule,
     TuiNotificationModule,
-    TuiNumberFormatModule,
+    TuiNumberFormatDirective,
     TuiSvgModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
@@ -42,7 +42,7 @@ import {ExampleTuiInputNumberComponent} from './input-number.component';
         InheritedDocumentationModule,
         TuiHintModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiInputNumberComponent)),
-        TuiNumberFormatModule,
+        TuiNumberFormatDirective,
     ],
     declarations: [
         ExampleTuiInputNumberComponent,
diff --git a/projects/demo/src/modules/components/input-range/input-range.module.ts b/projects/demo/src/modules/components/input-range/input-range.module.ts
index 542c8d4c568b..da60cdf113cd 100644
--- a/projects/demo/src/modules/components/input-range/input-range.module.ts
+++ b/projects/demo/src/modules/components/input-range/input-range.module.ts
@@ -7,7 +7,7 @@ import {
     TuiButtonModule,
     TuiLinkModule,
     TuiNotificationModule,
-    TuiNumberFormatModule,
+    TuiNumberFormatDirective,
     TuiSvgModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
@@ -43,7 +43,7 @@ import {ExampleTuiInputRangeComponent} from './input-range.component';
         TuiTextfieldControllerModule,
         TuiSvgModule,
         TuiNotificationModule,
-        TuiNumberFormatModule,
+        TuiNumberFormatDirective,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiInputRangeComponent)),
         NumberFormatDocumentationModule,
     ],
diff --git a/projects/demo/src/modules/components/input-slider/input-slider.module.ts b/projects/demo/src/modules/components/input-slider/input-slider.module.ts
index ff7c6b4d641f..79048177c2ee 100644
--- a/projects/demo/src/modules/components/input-slider/input-slider.module.ts
+++ b/projects/demo/src/modules/components/input-slider/input-slider.module.ts
@@ -8,7 +8,7 @@ import {
     TuiHintModule,
     TuiLinkModule,
     TuiNotificationModule,
-    TuiNumberFormatModule,
+    TuiNumberFormatDirective,
     TuiSvgModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
@@ -42,7 +42,7 @@ import {ExampleTuiInputSliderComponent} from './input-slider.component';
         TuiSvgModule,
         TuiNotificationModule,
         TuiTextfieldControllerModule,
-        TuiNumberFormatModule,
+        TuiNumberFormatDirective,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiInputSliderComponent)),
     ],
     declarations: [
diff --git a/projects/demo/src/modules/components/select/select.module.ts b/projects/demo/src/modules/components/select/select.module.ts
index d1cff1c58721..5fea1287435f 100644
--- a/projects/demo/src/modules/components/select/select.module.ts
+++ b/projects/demo/src/modules/components/select/select.module.ts
@@ -16,7 +16,7 @@ import {
     TuiLinkModule,
     TuiLoaderModule,
     TuiNotificationModule,
-    TuiNumberFormatModule,
+    TuiNumberFormatDirective,
     TuiScrollableDirective,
     TuiScrollbarComponent,
     TuiSvgModule,
@@ -81,7 +81,7 @@ import {ExampleTuiSelectComponent} from './select.component';
         TuiMapperPipeModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiSelectComponent)),
         TuiAmountPipe,
-        TuiNumberFormatModule,
+        TuiNumberFormatDirective,
         TuiScrollableDirective,
         TuiInitialsPipe,
     ],
diff --git a/projects/demo/src/modules/directives/date-format/examples/1/index.html b/projects/demo/src/modules/directives/date-format/examples/1/index.html
new file mode 100644
index 000000000000..19e9d85e494c
--- /dev/null
+++ b/projects/demo/src/modules/directives/date-format/examples/1/index.html
@@ -0,0 +1,14 @@
+<!-- Works in several levels-->
+<div
+    class="wrapper tui-space_top-3"
+    [tuiDateFormat]="{mode: 'YMD'}"
+>
+    <!-- You can also put directive directly on input-date -->
+    <tui-input-date
+        [formControl]="control"
+        [tuiDateFormat]="{separator: '-'}"
+    >
+        Cool
+        <input tuiTextfield />
+    </tui-input-date>
+</div>
diff --git a/projects/demo/src/modules/directives/date-format/examples/1/index.ts b/projects/demo/src/modules/directives/date-format/examples/1/index.ts
new file mode 100644
index 000000000000..5709c170ca43
--- /dev/null
+++ b/projects/demo/src/modules/directives/date-format/examples/1/index.ts
@@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiDateFormatDirective} from '@taiga-ui/core';
+import {TuiInputDateModule} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [TuiInputDateModule, TuiDateFormatDirective, ReactiveFormsModule],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class ExampleComponent {
+    protected readonly control = new FormControl();
+}
diff --git a/projects/demo/src/modules/directives/number-format/examples/import/import-module.md b/projects/demo/src/modules/directives/date-format/examples/import/import.md
similarity index 59%
rename from projects/demo/src/modules/directives/number-format/examples/import/import-module.md
rename to projects/demo/src/modules/directives/date-format/examples/import/import.md
index 45dfb4c1ab6e..2a73056a38a0 100644
--- a/projects/demo/src/modules/directives/number-format/examples/import/import-module.md
+++ b/projects/demo/src/modules/directives/date-format/examples/import/import.md
@@ -1,5 +1,5 @@
 ```ts
-import {TuiNumberFormatModule} from '@taiga-ui/core';
+import {TuiDateFormatDirective} from '@taiga-ui/core';
 
 // ...
 
@@ -7,7 +7,7 @@ import {TuiNumberFormatModule} from '@taiga-ui/core';
   standalone: true,
   imports: [
     // ...
-    TuiNumberFormatModule,
+    TuiDateFormatDirective,
   ],
   // ...
 })
diff --git a/projects/demo/src/modules/directives/date-format/examples/import/template.md b/projects/demo/src/modules/directives/date-format/examples/import/template.md
new file mode 100644
index 000000000000..e3c65e954b5b
--- /dev/null
+++ b/projects/demo/src/modules/directives/date-format/examples/import/template.md
@@ -0,0 +1,3 @@
+```html
+<tui-input-date [tuiDateFormat]="{mode, separator}"></tui-input-date>
+```
diff --git a/projects/demo/src/modules/directives/date-format/index.html b/projects/demo/src/modules/directives/date-format/index.html
new file mode 100644
index 000000000000..c005c3436b73
--- /dev/null
+++ b/projects/demo/src/modules/directives/date-format/index.html
@@ -0,0 +1,28 @@
+<tui-doc-page
+    header="DateFormat"
+    package="CORE"
+    type="directives"
+>
+    <ng-template pageTab>
+        <p>
+            Directive allows to customize
+            <code>TuiInputDate</code>
+            ,
+            <code>TuiInputDateRange</code>
+            ,
+            <code>TuiInputDateMulti</code>
+            and
+            <code>TuiInputDateTime</code>
+            date format.
+        </p>
+
+        <tui-doc-example
+            id="base"
+            heading="Basic"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
+        />
+    </ng-template>
+
+    <tui-setup *pageTab="'Setup'" />
+</tui-doc-page>
diff --git a/projects/demo/src/modules/directives/date-format/index.ts b/projects/demo/src/modules/directives/date-format/index.ts
new file mode 100644
index 000000000000..be9fca414f6c
--- /dev/null
+++ b/projects/demo/src/modules/directives/date-format/index.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemoModule} from '@demo/utils';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemoModule],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class ExampleComponent {}
diff --git a/projects/demo/src/modules/directives/number-format/examples/1/index.ts b/projects/demo/src/modules/directives/number-format/examples/1/index.ts
index ae874db0e282..5c57bfaaa274 100644
--- a/projects/demo/src/modules/directives/number-format/examples/1/index.ts
+++ b/projects/demo/src/modules/directives/number-format/examples/1/index.ts
@@ -2,13 +2,13 @@ import {Component} from '@angular/core';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiNumberFormatModule} from '@taiga-ui/core';
+import {TuiNumberFormatDirective} from '@taiga-ui/core';
 import {TuiInputNumberModule} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
     selector: 'tui-number-format-example-1',
-    imports: [TuiInputNumberModule, TuiNumberFormatModule, ReactiveFormsModule],
+    imports: [TuiInputNumberModule, TuiNumberFormatDirective, ReactiveFormsModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
diff --git a/projects/demo/src/modules/directives/number-format/examples/import/import.md b/projects/demo/src/modules/directives/number-format/examples/import/import.md
new file mode 100644
index 000000000000..f7fd0b0d77de
--- /dev/null
+++ b/projects/demo/src/modules/directives/number-format/examples/import/import.md
@@ -0,0 +1,15 @@
+```ts
+import {TuiNumberFormatDirective} from '@taiga-ui/core';
+
+// ...
+
+@Component({
+  standalone: true,
+  imports: [
+    // ...
+    TuiNumberFormatDirective,
+  ],
+  // ...
+})
+export class MyComponent {}
+```
diff --git a/projects/demo/src/modules/directives/number-format/examples/import/insert-template.md b/projects/demo/src/modules/directives/number-format/examples/import/template.md
similarity index 100%
rename from projects/demo/src/modules/directives/number-format/examples/import/insert-template.md
rename to projects/demo/src/modules/directives/number-format/examples/import/template.md
diff --git a/projects/demo/src/modules/directives/number-format/number-format.template.html b/projects/demo/src/modules/directives/number-format/index.html
similarity index 84%
rename from projects/demo/src/modules/directives/number-format/number-format.template.html
rename to projects/demo/src/modules/directives/number-format/index.html
index de92feb73bdb..d1523bf5b8ca 100644
--- a/projects/demo/src/modules/directives/number-format/number-format.template.html
+++ b/projects/demo/src/modules/directives/number-format/index.html
@@ -23,9 +23,5 @@
         </tui-doc-example>
     </ng-template>
 
-    <tui-setup
-        *pageTab="'Setup'"
-        [import]="import"
-        [template]="template"
-    />
+    <tui-setup *pageTab="'Setup'" />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/directives/number-format/number-format.component.ts b/projects/demo/src/modules/directives/number-format/index.ts
similarity index 67%
rename from projects/demo/src/modules/directives/number-format/number-format.component.ts
rename to projects/demo/src/modules/directives/number-format/index.ts
index a8a583758dbe..1d4f4801026d 100644
--- a/projects/demo/src/modules/directives/number-format/number-format.component.ts
+++ b/projects/demo/src/modules/directives/number-format/index.ts
@@ -16,10 +16,7 @@ import {TuiNumberFormatExample1} from './examples/1';
         TuiAddonDocModule,
         TuiNumberFormatExample1,
     ],
-    templateUrl: './number-format.template.html',
+    templateUrl: './index.html',
     changeDetection,
 })
-export default class ExampleTuiNumberFormatComponent {
-    protected readonly import = import('./examples/import/import-module.md?raw');
-    protected readonly template = import('./examples/import/insert-template.md?raw');
-}
+export default class ExampleTuiNumberFormatComponent {}
diff --git a/projects/demo/src/modules/pipes/amount/amount.module.ts b/projects/demo/src/modules/pipes/amount/amount.module.ts
index 8a9ff572d2a2..db5e0109ac0e 100644
--- a/projects/demo/src/modules/pipes/amount/amount.module.ts
+++ b/projects/demo/src/modules/pipes/amount/amount.module.ts
@@ -5,7 +5,7 @@ import {tuiGetDocModules} from '@taiga-ui/addon-doc';
 import {
     TuiLinkModule,
     TuiNotificationModule,
-    TuiNumberFormatModule,
+    TuiNumberFormatDirective,
 } from '@taiga-ui/core';
 
 import {ExampleTuiAmountComponent} from './amount.component';
@@ -18,7 +18,7 @@ import {TuiAmountExample3} from './examples/3';
         CommonModule,
         TuiAmountPipe,
         TuiNotificationModule,
-        TuiNumberFormatModule,
+        TuiNumberFormatDirective,
         tuiGetDocModules(ExampleTuiAmountComponent),
         TuiLinkModule,
     ],
diff --git a/projects/demo/src/modules/utils/math/math.module.ts b/projects/demo/src/modules/utils/math/math.module.ts
index 447d65d1fbd7..d5f0163ff6e7 100644
--- a/projects/demo/src/modules/utils/math/math.module.ts
+++ b/projects/demo/src/modules/utils/math/math.module.ts
@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiNumberFormatModule} from '@taiga-ui/core';
+import {TuiNumberFormatDirective} from '@taiga-ui/core';
 import {TuiInputNumberModule} from '@taiga-ui/kit';
 
 import {TuiMathExample1} from './examples/1';
@@ -21,7 +21,7 @@ import {ExampleMathComponent} from './math.component';
         ReactiveFormsModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleMathComponent)),
-        TuiNumberFormatModule,
+        TuiNumberFormatDirective,
     ],
     declarations: [
         ExampleMathComponent,
diff --git a/projects/demo/src/modules/utils/tokens/examples/10/index.html b/projects/demo/src/modules/utils/tokens/examples/10/index.html
new file mode 100644
index 000000000000..41b3855958bb
--- /dev/null
+++ b/projects/demo/src/modules/utils/tokens/examples/10/index.html
@@ -0,0 +1,25 @@
+<p class="tui-space_top-0">
+    Use
+    <code>TUI_FIRST_DAY_OF_WEEK</code>
+    injection token to change start day of the week (Monday by default).
+</p>
+
+<tui-doc-code [code]="provideFirstDayOfWeekToken" />
+
+<section>
+    <h3>This token can customize the following components:</h3>
+    <ul class="tui-list tui-list_small">
+        <li
+            *ngFor="let component of customizableComponentsViaThisToken"
+            class="tui-list__item"
+        >
+            <a
+                tuiLink
+                [fragment]="component.fragment"
+                [routerLink]="component.link"
+            >
+                {{ component.name }}
+            </a>
+        </li>
+    </ul>
+</section>
diff --git a/projects/demo/src/modules/utils/tokens/examples/10/index.ts b/projects/demo/src/modules/utils/tokens/examples/10/index.ts
new file mode 100644
index 000000000000..5243aa4f1aa6
--- /dev/null
+++ b/projects/demo/src/modules/utils/tokens/examples/10/index.ts
@@ -0,0 +1,37 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiDayOfWeek} from '@taiga-ui/cdk';
+import {TUI_FIRST_DAY_OF_WEEK} from '@taiga-ui/core';
+
+@Component({
+    selector: 'tui-token-example-10',
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+    providers: [
+        {
+            provide: TUI_FIRST_DAY_OF_WEEK,
+            useValue: TuiDayOfWeek.Sunday,
+        },
+    ],
+})
+export class TuiTokensExample10 {
+    protected readonly provideFirstDayOfWeekToken = import(
+        './provide-first-day-of-week-token.md?raw'
+    );
+
+    protected readonly customizableComponentsViaThisToken = [
+        {name: 'Calendar', link: '/components/calendar', fragment: 'localization'},
+        {
+            name: 'CalendarRange',
+            link: '/components/calendar-range',
+            fragment: 'localization',
+        },
+        {
+            name: 'MobileCalendar',
+            link: '/components/mobile-calendar',
+            fragment: 'localization',
+        },
+    ] as const;
+}
diff --git a/projects/demo/src/modules/utils/tokens/examples/9/provide-first-day-of-week-token.md b/projects/demo/src/modules/utils/tokens/examples/10/provide-first-day-of-week-token.md
similarity index 100%
rename from projects/demo/src/modules/utils/tokens/examples/9/provide-first-day-of-week-token.md
rename to projects/demo/src/modules/utils/tokens/examples/10/provide-first-day-of-week-token.md
diff --git a/projects/demo/src/modules/utils/tokens/examples/9/index.html b/projects/demo/src/modules/utils/tokens/examples/9/index.html
index 41b3855958bb..7f698979852c 100644
--- a/projects/demo/src/modules/utils/tokens/examples/9/index.html
+++ b/projects/demo/src/modules/utils/tokens/examples/9/index.html
@@ -1,25 +1,79 @@
-<p class="tui-space_top-0">
-    Use
-    <code>TUI_FIRST_DAY_OF_WEEK</code>
-    injection token to change start day of the week (Monday by default).
-</p>
+<div>
+    <div>
+        Using
+        <strong>TUI_DATE_FORMAT</strong>
+        injection token you can customize numbers formatting.
+    </div>
+    <div>For example: 10.01.2024</div>
+    <div>Can be customized as: 2024/01/10</div>
 
-<tui-doc-code [code]="provideFirstDayOfWeekToken" />
+    <section>
+        <h3>Description:</h3>
+        <dl>
+            <dt>
+                <code>mode</code>
+            </dt>
+            <dd class="tui-space_bottom-5">
+                active date format (
+                <code>'DMY' | 'MDY' | 'YMD'</code>
+                )
+            </dd>
+            <dt>
+                <code>separator</code>
+            </dt>
+            <dd>single-character date's separator (dot, slash etc.)</dd>
+        </dl>
+    </section>
 
-<section>
-    <h3>This token can customize the following components:</h3>
-    <ul class="tui-list tui-list_small">
-        <li
-            *ngFor="let component of customizableComponentsViaThisToken"
-            class="tui-list__item"
-        >
-            <a
-                tuiLink
-                [fragment]="component.fragment"
-                [routerLink]="component.link"
-            >
-                {{ component.name }}
-            </a>
-        </li>
-    </ul>
-</section>
+    <section>
+        <h3>Defaults:</h3>
+        <ul class="tui-list tui-list_small">
+            <li class="tui-list__item">
+                mode =
+                <code>DMY</code>
+            </li>
+            <li class="tui-list__item">
+                separator =
+                <code>.</code>
+            </li>
+        </ul>
+    </section>
+
+    <section>
+        <h3>Components that are customizable:</h3>
+        <ul class="tui-list tui-list_small">
+            <li class="tui-list__item">
+                <a
+                    routerLink="/components/input-date"
+                    tuiLink
+                >
+                    TuiInputDate
+                </a>
+            </li>
+            <li class="tui-list__item">
+                <a
+                    routerLink="components/input-date-range"
+                    tuiLink
+                >
+                    TuiInputDateRange
+                </a>
+            </li>
+            <li class="tui-list__item">
+                <a
+                    routerLink="components/input-date-time"
+                    tuiLink
+                >
+                    TuiInputDateTime
+                </a>
+            </li>
+            <li class="tui-list__item">
+                <a
+                    routerLink="components/input-date-multi"
+                    tuiLink
+                >
+                    TuiInputDateMulti
+                </a>
+            </li>
+        </ul>
+    </section>
+</div>
diff --git a/projects/demo/src/modules/utils/tokens/examples/9/index.ts b/projects/demo/src/modules/utils/tokens/examples/9/index.ts
index 62b101e669af..23a793166373 100644
--- a/projects/demo/src/modules/utils/tokens/examples/9/index.ts
+++ b/projects/demo/src/modules/utils/tokens/examples/9/index.ts
@@ -1,37 +1,14 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiDayOfWeek} from '@taiga-ui/cdk';
-import {TUI_FIRST_DAY_OF_WEEK} from '@taiga-ui/core';
+import {TUI_DATE_FORMAT} from '@taiga-ui/core';
 
 @Component({
     selector: 'tui-token-example-9',
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
-    providers: [
-        {
-            provide: TUI_FIRST_DAY_OF_WEEK,
-            useValue: TuiDayOfWeek.Sunday,
-        },
-    ],
 })
 export class TuiTokensExample9 {
-    protected readonly provideFirstDayOfWeekToken = import(
-        './provide-first-day-of-week-token.md?raw'
-    );
-
-    protected readonly customizableComponentsViaThisToken = [
-        {name: 'Calendar', link: '/components/calendar', fragment: 'localization'},
-        {
-            name: 'CalendarRange',
-            link: '/components/calendar-range',
-            fragment: 'localization',
-        },
-        {
-            name: 'MobileCalendar',
-            link: '/components/mobile-calendar',
-            fragment: 'localization',
-        },
-    ] as const;
+    protected readonly TuiDateFormatSettings = inject(TUI_DATE_FORMAT);
 }
diff --git a/projects/demo/src/modules/utils/tokens/tokens.component.ts b/projects/demo/src/modules/utils/tokens/tokens.component.ts
index 55781db87bfe..395f78aefd8f 100644
--- a/projects/demo/src/modules/utils/tokens/tokens.component.ts
+++ b/projects/demo/src/modules/utils/tokens/tokens.component.ts
@@ -46,4 +46,8 @@ export class ExampleTokensComponent {
     protected readonly example8: TuiDocExample = {
         TypeScript: import('./examples/8/index.ts?raw'),
     };
+
+    protected readonly example9: TuiDocExample = {
+        TypeScript: import('./examples/9/index.ts?raw'),
+    };
 }
diff --git a/projects/demo/src/modules/utils/tokens/tokens.module.ts b/projects/demo/src/modules/utils/tokens/tokens.module.ts
index 10e0a023cb07..e6105f8b2c5e 100644
--- a/projects/demo/src/modules/utils/tokens/tokens.module.ts
+++ b/projects/demo/src/modules/utils/tokens/tokens.module.ts
@@ -13,6 +13,7 @@ import {TuiTokensExample6} from './examples/6';
 import {TuiTokensExample7} from './examples/7';
 import {TuiTokensExample8} from './examples/8';
 import {TuiTokensExample9} from './examples/9';
+import {TuiTokensExample10} from './examples/10';
 import {ExampleTokensComponent} from './tokens.component';
 
 @NgModule({
@@ -33,6 +34,7 @@ import {ExampleTokensComponent} from './tokens.component';
         TuiTokensExample7,
         TuiTokensExample8,
         TuiTokensExample9,
+        TuiTokensExample10,
     ],
     exports: [ExampleTokensComponent],
 })
diff --git a/projects/demo/src/modules/utils/tokens/tokens.template.html b/projects/demo/src/modules/utils/tokens/tokens.template.html
index b2733453d464..d4dd842f8dd9 100644
--- a/projects/demo/src/modules/utils/tokens/tokens.template.html
+++ b/projects/demo/src/modules/utils/tokens/tokens.template.html
@@ -76,12 +76,21 @@
             <tui-token-example-8 />
         </tui-doc-example>
 
+        <tui-doc-example
+            id="date-format"
+            heading="TUI_DATE_FORMAT"
+            [content]="example8"
+            [fullsize]="true"
+        >
+            <tui-token-example-9 />
+        </tui-doc-example>
+
         <tui-doc-example
             id="first-day-of-week"
             heading="TUI_FIRST_DAY_OF_WEEK"
             [fullsize]="true"
         >
-            <tui-token-example-9 />
+            <tui-token-example-10 />
         </tui-doc-example>
     </ng-template>
 </tui-doc-page>
diff --git a/projects/kit/components/input-date-multi/input-date-multi.component.ts b/projects/kit/components/input-date-multi/input-date-multi.component.ts
index 55f370ad1278..3d59d3d7d531 100644
--- a/projects/kit/components/input-date-multi/input-date-multi.component.ts
+++ b/projects/kit/components/input-date-multi/input-date-multi.component.ts
@@ -8,6 +8,7 @@ import {
     Input,
     ViewChild,
 } from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import type {MaskitoOptions} from '@maskito/core';
 import {maskitoDateOptionsGenerator} from '@maskito/kit';
 import type {
@@ -20,8 +21,6 @@ import type {
 import {
     AbstractTuiMultipleControl,
     changeDateSeparator,
-    TUI_DATE_FORMAT,
-    TUI_DATE_SEPARATOR,
     TUI_FALSE_HANDLER,
     TUI_IS_MOBILE,
     tuiAsControl,
@@ -30,6 +29,7 @@ import {
     TuiDay,
     tuiIsString,
     TuiMonth,
+    tuiWatch,
 } from '@taiga-ui/cdk';
 import type {
     TuiMarkerHandler,
@@ -38,6 +38,8 @@ import type {
     TuiWithOptionalMinMax,
 } from '@taiga-ui/core';
 import {
+    TUI_DATE_FORMAT,
+    TUI_DEFAULT_DATE_FORMAT,
     TUI_DEFAULT_MARKER_HANDLER,
     TUI_TEXTFIELD_SIZE,
     TuiDialogService,
@@ -57,7 +59,7 @@ import {
 import {tuiImmutableUpdateInputDateMulti} from '@taiga-ui/kit/utils';
 import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus';
 import type {Observable} from 'rxjs';
-import {map, takeUntil} from 'rxjs';
+import {map} from 'rxjs';
 
 @Component({
     selector: 'tui-input-date[multiple]',
@@ -132,16 +134,24 @@ export class TuiInputDateMultiComponent
 
     protected open = false;
 
-    protected readonly dateFormat = inject(TUI_DATE_FORMAT);
-    protected readonly dateSeparator = inject(TUI_DATE_SEPARATOR);
+    protected dateFormat = TUI_DEFAULT_DATE_FORMAT;
     protected readonly isMobile = inject(TUI_IS_MOBILE);
     protected readonly doneWord$ = inject(TUI_DONE_WORD);
     protected readonly filler$: Observable<string> = this.dateTexts$.pipe(
         map(dateTexts =>
-            changeDateSeparator(dateTexts[this.dateFormat], this.dateSeparator),
+            changeDateSeparator(
+                dateTexts[this.dateFormat.mode],
+                this.dateFormat.separator,
+            ),
         ),
     );
 
+    protected readonly dateFormat$ = inject(TUI_DATE_FORMAT)
+        .pipe(tuiWatch(this.cdr), takeUntilDestroyed())
+        .subscribe(format => {
+            this.dateFormat = format;
+        });
+
     public get nativeFocusableElement(): HTMLInputElement | null {
         return this.textfield?.nativeFocusableElement || null;
     }
@@ -233,7 +243,7 @@ export class TuiInputDateMultiComponent
                     },
                 },
             )
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(value => {
                 this.value = value;
             });
diff --git a/projects/kit/components/input-date-range/input-date-range.component.ts b/projects/kit/components/input-date-range/input-date-range.component.ts
index a71cfc59550a..c856add1ec6f 100644
--- a/projects/kit/components/input-date-range/input-date-range.component.ts
+++ b/projects/kit/components/input-date-range/input-date-range.component.ts
@@ -8,6 +8,7 @@ import {
     Input,
     ViewChild,
 } from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import type {MaskitoOptions} from '@maskito/core';
 import {MASKITO_DEFAULT_OPTIONS} from '@maskito/core';
 import {maskitoDateRangeOptionsGenerator} from '@maskito/kit';
@@ -25,8 +26,6 @@ import {
     DATE_FILLER_LENGTH,
     DATE_RANGE_FILLER_LENGTH,
     RANGE_SEPARATOR_CHAR,
-    TUI_DATE_FORMAT,
-    TUI_DATE_SEPARATOR,
     TUI_FALSE_HANDLER,
     TUI_FIRST_DAY,
     TUI_IS_MOBILE,
@@ -38,6 +37,7 @@ import {
     TuiMonth,
     tuiNullableSame,
     tuiPure,
+    tuiWatch,
 } from '@taiga-ui/cdk';
 import type {
     TuiMarkerHandler,
@@ -46,6 +46,8 @@ import type {
     TuiWithOptionalMinMax,
 } from '@taiga-ui/core';
 import {
+    TUI_DATE_FORMAT,
+    TUI_DEFAULT_DATE_FORMAT,
     TUI_DEFAULT_MARKER_HANDLER,
     TUI_TEXTFIELD_SIZE,
     TuiDialogService,
@@ -66,7 +68,7 @@ import {
 } from '@taiga-ui/kit/tokens';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus';
-import {map, takeUntil} from 'rxjs';
+import {map} from 'rxjs';
 
 @Component({
     selector: 'tui-input-date-range',
@@ -132,12 +134,19 @@ export class TuiInputDateRangeComponent
 
     protected readonly dateFiller$ = this.dateTexts$.pipe(
         map(dateTexts =>
-            changeDateSeparator(dateTexts[this.dateFormat], this.dateSeparator),
+            changeDateSeparator(
+                dateTexts[this.dateFormat.mode],
+                this.dateFormat.separator,
+            ),
         ),
     );
 
-    protected readonly dateFormat = inject(TUI_DATE_FORMAT);
-    protected readonly dateSeparator = inject(TUI_DATE_SEPARATOR);
+    protected dateFormat = TUI_DEFAULT_DATE_FORMAT;
+    protected readonly dateFormat$ = inject(TUI_DATE_FORMAT)
+        .pipe(tuiWatch(this.cdr), takeUntilDestroyed())
+        .subscribe(format => {
+            this.dateFormat = format;
+        });
 
     public get nativeFocusableElement(): HTMLInputElement | null {
         return this.textfield?.nativeFocusableElement ?? null;
@@ -161,7 +170,7 @@ export class TuiInputDateRangeComponent
         }
 
         return value
-            ? value.getFormattedDayRange(this.dateFormat, this.dateSeparator)
+            ? value.getFormattedDayRange(this.dateFormat.mode, this.dateFormat.separator)
             : nativeValue;
     }
 
@@ -183,7 +192,7 @@ export class TuiInputDateRangeComponent
 
         this.value =
             value.length === DATE_RANGE_FILLER_LENGTH
-                ? TuiDayRange.normalizeParse(value, this.dateFormat)
+                ? TuiDayRange.normalizeParse(value, this.dateFormat.mode)
                 : null;
     }
 
@@ -232,8 +241,8 @@ export class TuiInputDateRangeComponent
         return this.activePeriod
             ? MASKITO_DEFAULT_OPTIONS
             : this.calculateMask(
-                  this.dateFormat,
-                  this.dateSeparator,
+                  this.dateFormat.mode,
+                  this.dateFormat.separator,
                   this.computedMin,
                   this.computedMax,
                   this.minLength,
@@ -317,7 +326,7 @@ export class TuiInputDateRangeComponent
                     },
                 },
             )
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(value => {
                 this.value = value;
             });
@@ -356,7 +365,10 @@ export class TuiInputDateRangeComponent
                 this.nativeValue.length ===
                     DATE_FILLER_LENGTH + RANGE_SEPARATOR_CHAR.length)
         ) {
-            this.value = TuiDayRange.normalizeParse(this.nativeValue, this.dateFormat);
+            this.value = TuiDayRange.normalizeParse(
+                this.nativeValue,
+                this.dateFormat.mode,
+            );
         }
     }
 
diff --git a/projects/kit/components/input-date-range/test/input-date-range.component.spec.ts b/projects/kit/components/input-date-range/test/input-date-range.component.spec.ts
index bb2b8d9ad8a1..2682597cf0dc 100644
--- a/projects/kit/components/input-date-range/test/input-date-range.component.spec.ts
+++ b/projects/kit/components/input-date-range/test/input-date-range.component.spec.ts
@@ -7,13 +7,15 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {
     AbstractTuiValueTransformer,
     RANGE_SEPARATOR_CHAR,
-    TUI_DATE_FORMAT,
-    TUI_DATE_SEPARATOR,
     TUI_LAST_DAY,
     TuiDay,
     TuiDayRange,
 } from '@taiga-ui/cdk';
-import {TuiRootModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {
+    TUI_DATE_FORMAT,
+    TuiRootModule,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
 import type {TuiDayRangePeriod} from '@taiga-ui/kit';
 import {
     TUI_DATE_RANGE_VALUE_TRANSFORMER,
@@ -22,6 +24,7 @@ import {
     TuiInputDateRangeModule,
 } from '@taiga-ui/kit';
 import {TuiNativeInputPO, TuiPageObject} from '@taiga-ui/testing';
+import {of} from 'rxjs';
 
 describe('InputDateRangeComponent', () => {
     @Component({
@@ -185,8 +188,10 @@ describe('InputDateRangeComponent', () => {
             TestBed.configureTestingModule({
                 ...defaultTestingModuleMeta,
                 providers: [
-                    {provide: TUI_DATE_FORMAT, useValue: 'MDY'},
-                    {provide: TUI_DATE_SEPARATOR, useValue: '/'},
+                    {
+                        provide: TUI_DATE_FORMAT,
+                        useValue: of({mode: 'MDY', separator: '/'}),
+                    },
                 ],
             });
             await TestBed.compileComponents();
@@ -224,8 +229,10 @@ describe('InputDateRangeComponent', () => {
             TestBed.configureTestingModule({
                 ...defaultTestingModuleMeta,
                 providers: [
-                    {provide: TUI_DATE_FORMAT, useValue: 'YMD'},
-                    {provide: TUI_DATE_SEPARATOR, useValue: '-'},
+                    {
+                        provide: TUI_DATE_FORMAT,
+                        useValue: of({mode: 'YMD', separator: '-'}),
+                    },
                 ],
             });
             await TestBed.compileComponents();
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
index e9b40db3860a..d766b56f13ea 100644
--- a/projects/kit/components/input-date-time/input-date-time.component.ts
+++ b/projects/kit/components/input-date-time/input-date-time.component.ts
@@ -7,6 +7,7 @@ import {
     Input,
     ViewChild,
 } from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import type {MaskitoOptions} from '@maskito/core';
 import {maskitoDateTimeOptionsGenerator} from '@maskito/kit';
 import type {
@@ -21,10 +22,7 @@ import {
     AbstractTuiControl,
     changeDateSeparator,
     DATE_FILLER_LENGTH,
-    TUI_DATE_FORMAT,
-    TUI_DATE_SEPARATOR,
     TUI_FALSE_HANDLER,
-    TUI_IS_IOS,
     TUI_IS_MOBILE,
     tuiAsControl,
     tuiAsFocusableItemAccessor,
@@ -35,9 +33,15 @@ import {
     tuiNullableSame,
     tuiPure,
     TuiTime,
+    tuiWatch,
 } from '@taiga-ui/cdk';
 import type {TuiSizeL, TuiSizeS, TuiWithOptionalMinMax} from '@taiga-ui/core';
-import {TUI_TEXTFIELD_SIZE, TuiPrimitiveTextfieldComponent} from '@taiga-ui/core';
+import {
+    TUI_DATE_FORMAT,
+    TUI_DEFAULT_DATE_FORMAT,
+    TUI_TEXTFIELD_SIZE,
+    TuiPrimitiveTextfieldComponent,
+} from '@taiga-ui/core';
 import {
     DATE_TIME_SEPARATOR,
     TUI_DATE_MODE_MASKITO_ADAPTER,
@@ -51,7 +55,7 @@ import {
     tuiDateStreamWithTransformer,
 } from '@taiga-ui/kit/tokens';
 import type {Observable} from 'rxjs';
-import {BehaviorSubject, combineLatest, map, takeUntil, timer} from 'rxjs';
+import {BehaviorSubject, combineLatest, map, timer} from 'rxjs';
 
 @Component({
     selector: 'tui-input-date-time',
@@ -104,7 +108,10 @@ export class TuiInputDateTimeComponent
     protected readonly filler$: Observable<string> = combineLatest([
         this.dateTexts$.pipe(
             map(dateTexts =>
-                changeDateSeparator(dateTexts[this.dateFormat], this.dateSeparator),
+                changeDateSeparator(
+                    dateTexts[this.dateFormat.mode],
+                    this.dateFormat.separator,
+                ),
             ),
         ),
         this.timeTexts$,
@@ -115,10 +122,13 @@ export class TuiInputDateTimeComponent
         ),
     );
 
-    protected readonly dateFormat = inject(TUI_DATE_FORMAT);
-    protected readonly dateSeparator = inject(TUI_DATE_SEPARATOR);
+    protected dateFormat = TUI_DEFAULT_DATE_FORMAT;
     protected readonly isMobile = inject(TUI_IS_MOBILE);
-    protected readonly isIos = inject(TUI_IS_IOS);
+    protected readonly dateFormat$ = inject(TUI_DATE_FORMAT)
+        .pipe(tuiWatch(this.cdr), takeUntilDestroyed())
+        .subscribe(format => {
+            this.dateFormat = format;
+        });
 
     @Input()
     public set timeMode(value: TuiTimeMode) {
@@ -173,7 +183,7 @@ export class TuiInputDateTimeComponent
         }
 
         const [date, time] = value.split(DATE_TIME_SEPARATOR);
-        const parsedDate = TuiDay.normalizeParse(date, this.dateFormat);
+        const parsedDate = TuiDay.normalizeParse(date, this.dateFormat.mode);
         const parsedTime =
             time && time.length === this.timeMode.length
                 ? TuiTime.fromString(time)
@@ -205,8 +215,8 @@ export class TuiInputDateTimeComponent
             this.computedMin,
             this.computedMax,
             this.timeMode,
-            this.dateFormat,
-            this.dateSeparator,
+            this.dateFormat.mode,
+            this.dateFormat.separator,
         );
     }
 
@@ -291,7 +301,7 @@ export class TuiInputDateTimeComponent
         }
 
         timer(0)
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
                 this.nativeValue = this.trimTrailingSeparator(this.nativeValue);
             });
@@ -359,7 +369,7 @@ export class TuiInputDateTimeComponent
     ): string {
         const dateString =
             date instanceof TuiDay
-                ? date.toString(this.dateFormat, this.dateSeparator)
+                ? date.toString(this.dateFormat.mode, this.dateFormat.separator)
                 : date;
         const timeString = time instanceof TuiTime ? time.toString(timeMode) : time || '';
 
@@ -392,7 +402,7 @@ export class TuiInputDateTimeComponent
 
     private trimTrailingSeparator(value: string): string {
         return value.replace(
-            new RegExp(`(\\${this.dateSeparator}|${DATE_TIME_SEPARATOR}|\\.)$`),
+            new RegExp(`(\\${this.dateFormat.separator}|${DATE_TIME_SEPARATOR}|\\.)$`),
             '',
         );
     }
diff --git a/projects/kit/components/input-date-time/test/input-date-time.component.spec.ts b/projects/kit/components/input-date-time/test/input-date-time.component.spec.ts
index 96eeb7801af9..269467a55603 100644
--- a/projects/kit/components/input-date-time/test/input-date-time.component.spec.ts
+++ b/projects/kit/components/input-date-time/test/input-date-time.component.spec.ts
@@ -6,20 +6,19 @@ import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {
     AbstractTuiValueTransformer,
-    TUI_DATE_FORMAT,
-    TUI_DATE_SEPARATOR,
     TUI_FIRST_DAY,
     TUI_LAST_DAY,
     TuiDay,
     TuiTime,
 } from '@taiga-ui/cdk';
-import {TuiRootModule} from '@taiga-ui/core';
+import {TUI_DATE_FORMAT, TuiRootModule} from '@taiga-ui/core';
 import {TUI_DATE_TIME_VALUE_TRANSFORMER} from '@taiga-ui/kit';
 import {
     TuiInputDateTimeComponent,
     TuiInputDateTimeModule,
 } from '@taiga-ui/kit/components';
 import {TuiNativeInputPO, TuiPageObject} from '@taiga-ui/testing';
+import {of} from 'rxjs';
 
 describe('InputDateTime', () => {
     @Component({
@@ -242,8 +241,10 @@ describe('InputDateTime', () => {
             TestBed.configureTestingModule({
                 ...defaultTestingModuleMeta,
                 providers: [
-                    {provide: TUI_DATE_FORMAT, useValue: 'MDY'},
-                    {provide: TUI_DATE_SEPARATOR, useValue: '/'},
+                    {
+                        provide: TUI_DATE_FORMAT,
+                        useValue: of({mode: 'MDY', separator: '/'}),
+                    },
                 ],
             });
             await TestBed.compileComponents();
@@ -280,8 +281,10 @@ describe('InputDateTime', () => {
             TestBed.configureTestingModule({
                 ...defaultTestingModuleMeta,
                 providers: [
-                    {provide: TUI_DATE_FORMAT, useValue: 'YMD'},
-                    {provide: TUI_DATE_SEPARATOR, useValue: '-'},
+                    {
+                        provide: TUI_DATE_FORMAT,
+                        useValue: of({mode: 'YMD', separator: '-'}),
+                    },
                 ],
             });
             await TestBed.compileComponents();
diff --git a/projects/kit/components/input-date/input-date.component.ts b/projects/kit/components/input-date/input-date.component.ts
index 8443826a8068..6006cf285c6c 100644
--- a/projects/kit/components/input-date/input-date.component.ts
+++ b/projects/kit/components/input-date/input-date.component.ts
@@ -8,6 +8,7 @@ import {
     Input,
     ViewChild,
 } from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import type {MaskitoOptions} from '@maskito/core';
 import {MASKITO_DEFAULT_OPTIONS} from '@maskito/core';
 import {maskitoDateOptionsGenerator} from '@maskito/kit';
@@ -22,8 +23,6 @@ import {
     AbstractTuiNullableControl,
     changeDateSeparator,
     DATE_FILLER_LENGTH,
-    TUI_DATE_FORMAT,
-    TUI_DATE_SEPARATOR,
     TUI_FALSE_HANDLER,
     TUI_IS_MOBILE,
     tuiAsControl,
@@ -33,6 +32,7 @@ import {
     TuiMonth,
     tuiNullableSame,
     tuiPure,
+    tuiWatch,
 } from '@taiga-ui/cdk';
 import type {
     TuiMarkerHandler,
@@ -41,6 +41,8 @@ import type {
     TuiWithOptionalMinMax,
 } from '@taiga-ui/core';
 import {
+    TUI_DATE_FORMAT,
+    TUI_DEFAULT_DATE_FORMAT,
     TUI_DEFAULT_MARKER_HANDLER,
     TUI_TEXTFIELD_SIZE,
     TuiDialogService,
@@ -58,7 +60,7 @@ import {
 } from '@taiga-ui/kit/tokens';
 import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus';
 import type {Observable} from 'rxjs';
-import {map, takeUntil} from 'rxjs';
+import {map} from 'rxjs';
 
 @Component({
     selector: 'tui-input-date',
@@ -103,6 +105,7 @@ export class TuiInputDateComponent
     @Input()
     public defaultActiveYearMonth = TuiMonth.currentLocal();
 
+    public dateFormat = TUI_DEFAULT_DATE_FORMAT;
     protected open = false;
     protected readonly dateTexts$ = inject(TUI_DATE_TEXTS);
     protected override readonly valueTransformer = inject(TUI_DATE_VALUE_TRANSFORMER, {
@@ -110,15 +113,22 @@ export class TuiInputDateComponent
     });
 
     protected readonly isMobile = inject(TUI_IS_MOBILE);
-    protected readonly dateFormat = inject(TUI_DATE_FORMAT);
-    protected readonly dateSeparator = inject(TUI_DATE_SEPARATOR);
     protected readonly type!: TuiContext<TuiActiveZoneDirective>;
     protected readonly filler$: Observable<string> = this.dateTexts$.pipe(
         map(dateTexts =>
-            changeDateSeparator(dateTexts[this.dateFormat], this.dateSeparator),
+            changeDateSeparator(
+                dateTexts[this.dateFormat.mode],
+                this.dateFormat.separator,
+            ),
         ),
     );
 
+    protected readonly dateFormat$ = inject(TUI_DATE_FORMAT)
+        .pipe(tuiWatch(this.cdr), takeUntilDestroyed())
+        .subscribe(format => {
+            this.dateFormat = format;
+        });
+
     public get computedMin(): TuiDay {
         return this.min ?? this.options.min;
     }
@@ -154,7 +164,9 @@ export class TuiInputDateComponent
             return String(activeItem);
         }
 
-        return value ? value.toString(this.dateFormat, this.dateSeparator) : nativeValue;
+        return value
+            ? value.toString(this.dateFormat.mode, this.dateFormat.separator)
+            : nativeValue;
     }
 
     public onValueChange(value: string): void {
@@ -169,7 +181,7 @@ export class TuiInputDateComponent
         this.value =
             value.length !== DATE_FILLER_LENGTH
                 ? null
-                : TuiDay.normalizeParse(value, this.dateFormat);
+                : TuiDay.normalizeParse(value, this.dateFormat.mode);
     }
 
     public override setDisabledState(): void {
@@ -219,8 +231,8 @@ export class TuiInputDateComponent
         return this.activeItem
             ? MASKITO_DEFAULT_OPTIONS
             : this.computeMaskOptions(
-                  this.dateFormat,
-                  this.dateSeparator,
+                  this.dateFormat.mode,
+                  this.dateFormat.separator,
                   this.computedMin,
                   this.computedMax,
               );
@@ -268,7 +280,7 @@ export class TuiInputDateComponent
                     disabledItemHandler: this.disabledItemHandler,
                 },
             })
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(value => {
                 this.value = value;
             });
diff --git a/projects/kit/components/input-date/input-date.directive.ts b/projects/kit/components/input-date/input-date.directive.ts
index 3d8e776387c0..604e81685880 100644
--- a/projects/kit/components/input-date/input-date.directive.ts
+++ b/projects/kit/components/input-date/input-date.directive.ts
@@ -1,5 +1,6 @@
 import {Directive} from '@angular/core';
 import type {TuiDay} from '@taiga-ui/cdk';
+import type {TuiDateFormatSettings} from '@taiga-ui/core';
 import {AbstractTuiTextfieldHost, tuiAsTextfieldHost} from '@taiga-ui/core';
 
 import type {TuiInputDateComponent} from './input-date.component';
@@ -21,6 +22,10 @@ export class TuiInputDateDirective extends AbstractTuiTextfieldHost<TuiInputDate
         return this.host.computedMin;
     }
 
+    public get format(): TuiDateFormatSettings {
+        return this.host.dateFormat;
+    }
+
     public onValueChange(value: string): void {
         if (!value) {
             this.host.nativeValue = '';
diff --git a/projects/kit/components/input-date/native-date/native-date.component.ts b/projects/kit/components/input-date/native-date/native-date.component.ts
index 7cfe575ed71f..4f910f217c84 100644
--- a/projects/kit/components/input-date/native-date/native-date.component.ts
+++ b/projects/kit/components/input-date/native-date/native-date.component.ts
@@ -1,5 +1,5 @@
 import {Directive, inject} from '@angular/core';
-import {DATE_FILLER_LENGTH, TUI_DATE_FORMAT, TuiDay} from '@taiga-ui/cdk';
+import {DATE_FILLER_LENGTH, TuiDay} from '@taiga-ui/cdk';
 import {TUI_TEXTFIELD_HOST} from '@taiga-ui/core';
 
 import type {TuiInputDateDirective} from '../input-date.directive';
@@ -19,12 +19,14 @@ import type {TuiInputDateDirective} from '../input-date.directive';
     },
 })
 export class TuiNativeDateDirective {
-    private readonly dateFormat = inject(TUI_DATE_FORMAT);
     protected readonly host = inject<TuiInputDateDirective>(TUI_TEXTFIELD_HOST);
 
     protected get value(): string {
         return this.host.value.length === DATE_FILLER_LENGTH
-            ? TuiDay.normalizeParse(this.host.value, this.dateFormat).toString('YMD', '-')
+            ? TuiDay.normalizeParse(this.host.value, this.host.format.mode).toString(
+                  'YMD',
+                  '-',
+              )
             : '';
     }
 
@@ -38,7 +40,9 @@ export class TuiNativeDateDirective {
 
     protected onChange(value: string): void {
         this.host.onValueChange(
-            value ? TuiDay.normalizeParse(value, 'YMD').toString(this.dateFormat) : '',
+            value
+                ? TuiDay.normalizeParse(value, 'YMD').toString(this.host.format.mode)
+                : '',
         );
     }
 }
diff --git a/projects/kit/components/input-date/test/input-date.component.spec.ts b/projects/kit/components/input-date/test/input-date.component.spec.ts
index 4422696b8192..f05db180abbb 100644
--- a/projects/kit/components/input-date/test/input-date.component.spec.ts
+++ b/projects/kit/components/input-date/test/input-date.component.spec.ts
@@ -4,17 +4,18 @@ import type {ComponentFixture} from '@angular/core/testing';
 import {TestBed} from '@angular/core/testing';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {AbstractTuiValueTransformer, TuiDay} from '@taiga-ui/cdk';
+import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 import {
-    AbstractTuiValueTransformer,
     TUI_DATE_FORMAT,
-    TUI_DATE_SEPARATOR,
-    TuiDay,
-} from '@taiga-ui/cdk';
-import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
-import {TuiHintModule, TuiRootModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
+    TuiHintModule,
+    TuiRootModule,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
 import {TuiInputDateComponent, TuiInputDateModule} from '@taiga-ui/kit';
 import {TUI_DATE_VALUE_TRANSFORMER} from '@taiga-ui/kit/tokens';
 import {TuiNativeInputPO, TuiPageObject} from '@taiga-ui/testing';
+import {of} from 'rxjs';
 
 describe('InputDate', () => {
     @Component({
@@ -186,7 +187,7 @@ describe('InputDate', () => {
         beforeEach(async () => {
             TestBed.configureTestingModule({
                 ...meta,
-                providers: [{provide: TUI_DATE_FORMAT, useValue: 'YMD'}],
+                providers: [{provide: TUI_DATE_FORMAT, useValue: of({mode: 'YMD'})}],
             });
             await TestBed.compileComponents();
             await initializeEnvironment();
@@ -233,7 +234,7 @@ describe('InputDate', () => {
         beforeEach(async () => {
             TestBed.configureTestingModule({
                 ...meta,
-                providers: [{provide: TUI_DATE_FORMAT, useValue: 'MDY'}],
+                providers: [{provide: TUI_DATE_FORMAT, useValue: of({mode: 'MDY'})}],
             });
             await TestBed.compileComponents();
             await initializeEnvironment();
@@ -281,8 +282,10 @@ describe('InputDate', () => {
             TestBed.configureTestingModule({
                 ...meta,
                 providers: [
-                    {provide: TUI_DATE_FORMAT, useValue: 'MDY'},
-                    {provide: TUI_DATE_SEPARATOR, useValue: '/'},
+                    {
+                        provide: TUI_DATE_FORMAT,
+                        useValue: of({mode: 'MDY', separator: '/'}),
+                    },
                 ],
             });
             await TestBed.compileComponents();
diff --git a/projects/kit/components/input-number/test/input-number-format.spec.ts b/projects/kit/components/input-number/test/input-number-format.spec.ts
index d3c41f5e0f5f..73251afb7a76 100644
--- a/projects/kit/components/input-number/test/input-number-format.spec.ts
+++ b/projects/kit/components/input-number/test/input-number-format.spec.ts
@@ -5,7 +5,7 @@ import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {CHAR_NO_BREAK_SPACE} from '@taiga-ui/cdk';
 import type {TuiDecimalMode} from '@taiga-ui/core';
-import {TuiNumberFormatModule, tuiNumberFormatProvider} from '@taiga-ui/core';
+import {TuiNumberFormatDirective, tuiNumberFormatProvider} from '@taiga-ui/core';
 import {TuiInputNumberComponent, TuiInputNumberModule} from '@taiga-ui/kit';
 import {TuiNativeInputPO} from '@taiga-ui/testing';
 
@@ -41,7 +41,7 @@ describe('InputNumber - backward compatibility for separators', () => {
             TestBed.configureTestingModule({
                 imports: [
                     NoopAnimationsModule,
-                    TuiNumberFormatModule,
+                    TuiNumberFormatDirective,
                     TuiInputNumberModule,
                     ReactiveFormsModule,
                 ],
@@ -81,7 +81,7 @@ describe('InputNumber - backward compatibility for separators', () => {
                 imports: [
                     NoopAnimationsModule,
                     TuiInputNumberModule,
-                    TuiNumberFormatModule,
+                    TuiNumberFormatDirective,
                     ReactiveFormsModule,
                 ],
                 declarations: [TestComponent],
diff --git a/projects/kit/components/input-number/test/input-number.component.spec.ts b/projects/kit/components/input-number/test/input-number.component.spec.ts
index 580e2dc3cfaa..5980f5b0e1c3 100644
--- a/projects/kit/components/input-number/test/input-number.component.spec.ts
+++ b/projects/kit/components/input-number/test/input-number.component.spec.ts
@@ -8,7 +8,7 @@ import {CHAR_MINUS, CHAR_NO_BREAK_SPACE} from '@taiga-ui/cdk';
 import type {TuiDecimalMode, TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 import {
     TuiHintModule,
-    TuiNumberFormatModule,
+    TuiNumberFormatDirective,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
 import {TuiInputNumberComponent, TuiInputNumberModule} from '@taiga-ui/kit';
@@ -65,7 +65,7 @@ describe('InputNumber', () => {
             imports: [
                 NoopAnimationsModule,
                 TuiInputNumberModule,
-                TuiNumberFormatModule,
+                TuiNumberFormatDirective,
                 ReactiveFormsModule,
                 TuiTextfieldControllerModule,
                 TuiHintModule,
diff --git a/projects/kit/components/input-range/input-range.module.ts b/projects/kit/components/input-range/input-range.module.ts
index cc15b283a322..bfe7bb74c37d 100644
--- a/projects/kit/components/input-range/input-range.module.ts
+++ b/projects/kit/components/input-range/input-range.module.ts
@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {TuiActiveZoneDirective, TuiPressedModule} from '@taiga-ui/cdk';
 import {
-    TuiNumberFormatModule,
+    TuiNumberFormatDirective,
     TuiTextfieldControllerModule,
     TuiWrapperModule,
 } from '@taiga-ui/core';
@@ -24,7 +24,7 @@ import {TuiInputRangeComponent} from './input-range.component';
         TuiRangeModule,
         TuiWrapperModule,
         TuiTextfieldControllerModule,
-        TuiNumberFormatModule,
+        TuiNumberFormatDirective,
     ],
     declarations: [TuiInputRangeComponent],
     exports: [TuiInputRangeComponent],
diff --git a/projects/kit/components/input-slider/input-slider.module.ts b/projects/kit/components/input-slider/input-slider.module.ts
index 5a0912fb9a2a..ef08ac2d0473 100644
--- a/projects/kit/components/input-slider/input-slider.module.ts
+++ b/projects/kit/components/input-slider/input-slider.module.ts
@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {TuiFocusableModule} from '@taiga-ui/cdk';
-import {TuiNumberFormatModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiNumberFormatDirective, TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {TuiInputNumberModule} from '@taiga-ui/kit/components/input-number';
 import {TuiSliderModule} from '@taiga-ui/kit/components/slider';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
@@ -16,7 +16,7 @@ import {TuiInputSliderComponent} from './input-slider.component';
         PolymorpheusModule,
         TuiFocusableModule,
         TuiInputNumberModule,
-        TuiNumberFormatModule,
+        TuiNumberFormatDirective,
         TuiSliderModule,
         TuiTextfieldControllerModule,
     ],