diff --git a/projects/demo-playwright/tests/legacy/input-date-range/input-date-range.pw.spec.ts b/projects/demo-playwright/tests/legacy/input-date-range/input-date-range.pw.spec.ts
index 983b09968e32..116a663964d9 100644
--- a/projects/demo-playwright/tests/legacy/input-date-range/input-date-range.pw.spec.ts
+++ b/projects/demo-playwright/tests/legacy/input-date-range/input-date-range.pw.spec.ts
@@ -9,6 +9,7 @@ import {
 } from '../../../playwright.options';
 import {
     CHAR_NO_BREAK_SPACE,
+    TuiCalendarPO,
     TuiCalendarSheetPO,
     TuiDocumentationPagePO,
     tuiGoto,
@@ -31,11 +32,16 @@ test.describe('InputDateRange', () => {
     test.describe('API', () => {
         let example!: Locator;
 
+        let calendar!: TuiCalendarPO;
+
         test.beforeEach(() => {
             example = documentationPage.apiPageExample;
+
             inputDateRange = new TuiInputDateRangePO(
                 example.locator('tui-input-date-range'),
             );
+
+            calendar = new TuiCalendarPO(inputDateRange.calendar);
         });
 
         ['s', 'm', 'l'].forEach((size) => {
@@ -44,7 +50,7 @@ test.describe('InputDateRange', () => {
             }) => {
                 await tuiGoto(
                     page,
-                    `components/input-date-range/API?tuiTextfieldSize=${size}`,
+                    `${DemoRoute.InputDateRange}/API?tuiTextfieldSize=${size}`,
                 );
 
                 await inputDateRange.textfield.click();
@@ -171,7 +177,7 @@ test.describe('InputDateRange', () => {
 
             await tuiGoto(
                 page,
-                'components/input-date-range/API?items$=1&sandboxExpanded=true',
+                `${DemoRoute.InputDateRange}/API?items$=1&sandboxExpanded=true`,
             );
 
             await inputDateRange.textfield.click();
@@ -191,7 +197,7 @@ test.describe('InputDateRange', () => {
         });
 
         test('Calendar shows end of period, when selected any range', async ({page}) => {
-            await tuiGoto(page, 'components/input-date-range/API?items$=1');
+            await tuiGoto(page, `${DemoRoute.InputDateRange}/API?items$=1`);
 
             await inputDateRange.textfield.click();
             await inputDateRange.selectItem(0);
@@ -201,6 +207,33 @@ test.describe('InputDateRange', () => {
             await expect(example).toHaveScreenshot('09-calendar-shows-end-of-period.png');
         });
 
+        test('Press backspace to remove item, textfield is empty', async ({page}) => {
+            await tuiGoto(page, `${DemoRoute.InputDateRange}/API?items$=1`);
+
+            await inputDateRange.textfield.click();
+            await calendar.itemButton.first().click();
+
+            await inputDateRange.textfield.focus();
+            await inputDateRange.textfield.press('Backspace');
+
+            await expect(inputDateRange.textfield).toHaveValue('');
+            await expect(inputDateRange.textfield).toHaveScreenshot(
+                '10-input-date-range.png',
+            );
+        });
+
+        test('Enter item date, it converts to item name', async ({page}) => {
+            await tuiGoto(page, `${DemoRoute.InputDateRange}/API?items$=1`);
+
+            await inputDateRange.textfield.focus();
+            await inputDateRange.textfield.fill('25.09.2020 - 25.09.2020');
+
+            await expect(inputDateRange.textfield).toHaveValue('Today');
+            await expect(inputDateRange.textfield).toHaveScreenshot(
+                '11-input-date-range.png',
+            );
+        });
+
         test.describe('Mobile emulation', () => {
             test.use({
                 viewport: {
diff --git a/projects/legacy/components/input-date-range/input-date-range.component.ts b/projects/legacy/components/input-date-range/input-date-range.component.ts
index ab546c442f9f..386d3568e5a2 100644
--- a/projects/legacy/components/input-date-range/input-date-range.component.ts
+++ b/projects/legacy/components/input-date-range/input-date-range.component.ts
@@ -182,8 +182,12 @@ export class TuiInputDateRangeComponent
             this.onOpenChange(true);
         }
 
+        if (this.activePeriod) {
+            this.nativeValue = '';
+        }
+
         this.value =
-            value.length === DATE_RANGE_FILLER_LENGTH
+            value.length === DATE_RANGE_FILLER_LENGTH && !this.activePeriod
                 ? TuiDayRange.normalizeParse(value, this.dateFormat.mode)
                 : null;
 
diff --git a/projects/legacy/components/input-date-range/test/input-date-range.component.spec.ts b/projects/legacy/components/input-date-range/test/input-date-range.component.spec.ts
index e2025b27396c..d612152d52d8 100644
--- a/projects/legacy/components/input-date-range/test/input-date-range.component.spec.ts
+++ b/projects/legacy/components/input-date-range/test/input-date-range.component.spec.ts
@@ -2,7 +2,7 @@ import type {DebugElement, Type} from '@angular/core';
 import {ChangeDetectionStrategy, Component, Optional, ViewChild} from '@angular/core';
 import type {ComponentFixture} from '@angular/core/testing';
 import {TestBed} from '@angular/core/testing';
-import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {By} from '@angular/platform-browser';
 import {
     RANGE_SEPARATOR_CHAR,
@@ -16,6 +16,7 @@ import {NG_EVENT_PLUGINS} from '@taiga-ui/event-plugins';
 import {
     TUI_DATE_RANGE_VALUE_TRANSFORMER,
     TUI_DATE_VALUE_TRANSFORMER,
+    tuiCreateDefaultDayRangePeriods,
     TuiDayRangePeriod,
 } from '@taiga-ui/kit';
 import {
@@ -30,6 +31,7 @@ describe('InputDateRangeComponent', () => {
     @Component({
         standalone: true,
         imports: [
+            FormsModule,
             ReactiveFormsModule,
             TuiInputDateRangeModule,
             TuiRoot,
@@ -44,6 +46,7 @@ describe('InputDateRangeComponent', () => {
                     [min]="min"
                     [readOnly]="readOnly"
                     [tuiTextfieldCleaner]="cleaner"
+                    [(ngModel)]="value"
                 ></tui-input-date-range>
             </tui-root>
         `,
@@ -61,6 +64,11 @@ describe('InputDateRangeComponent', () => {
             ),
         );
 
+        public value: TuiDayRange | [Date, Date] | null = new TuiDayRange(
+            TuiDay.currentLocal().append({day: -2}),
+            TuiDay.currentLocal().append({day: -2}),
+        );
+
         public cleaner = false;
 
         public readOnly = false;
@@ -202,6 +210,69 @@ describe('InputDateRangeComponent', () => {
                 expect(component.open).toBe(true);
             });
         });
+
+        describe('With items', () => {
+            beforeEach(() => {
+                testComponent.items = tuiCreateDefaultDayRangePeriods();
+            });
+
+            it('when entering item date, input shows named date', async () => {
+                const today = TuiDay.currentLocal();
+
+                inputPO.sendText(
+                    `${today.toString()}${RANGE_SEPARATOR_CHAR}${today.toString()}`,
+                );
+
+                await fixture.whenStable();
+
+                expect(inputPO.value).toBe('Today');
+            });
+
+            it('when control value updated with item date, input shows named date', async () => {
+                const today = TuiDay.currentLocal();
+
+                testComponent.control.setValue(new TuiDayRange(today, today));
+                fixture.detectChanges();
+
+                await fixture.whenStable();
+
+                expect(inputPO.value).toBe('Today');
+            });
+
+            it('when ngModel value updated with item date, input shows named date', async () => {
+                const today = TuiDay.currentLocal();
+
+                testComponent.value = new TuiDayRange(today, today);
+                fixture.detectChanges();
+
+                await fixture.whenStable();
+
+                expect(inputPO.value).toBe('Today');
+            });
+
+            it('when selected item date via calendar, input shows named date', async () => {
+                inputPO.sendText('');
+
+                fixture.detectChanges();
+
+                const [leftCalendar] = getCalendars();
+
+                expect(leftCalendar).toBeTruthy();
+
+                if (leftCalendar) {
+                    getCalendarCell(
+                        leftCalendar,
+                        TuiDay.currentLocal().day,
+                    )?.nativeElement?.click();
+                }
+
+                fixture.detectChanges();
+
+                await fixture.whenStable();
+
+                expect(inputPO.value).toBe('Today');
+            });
+        });
     });
 
     describe('InputDateRangeComponent + TUI_DATE_FORMAT="MDY" + TUI_DATE_SEPARATOR="/"', () => {