Add editable date range input by ddaribo · Pull Request #1733 · IgniteUI/igniteui-webcomponents

ddaribo · 2025-06-09T13:14:14Z

Adds a new IgcDateRangeInputComponent to be used by the IgcDateRangePicker, which would allow to edit date range by typing in singe-input mode as well.

…nput; add test for both input modes

Copilot

Pull request overview

This pull request adds a new IgcDateRangeInputComponent to enable editable date range input in single-input mode for the date range picker. The implementation involves refactoring the existing IgcDateTimeInputComponent by extracting common functionality into a new IgcDateTimeInputBaseComponent base class that uses generic type parameters to support both single date values and date ranges.

Changes:

Extracted IgcDateTimeInputBaseComponent as a generic base class for date/time input components
Created new IgcDateRangeInputComponent for editable date range input with mask support
Updated IgcDateRangePickerComponent to use the new date range input component in single-input mode
Updated story files to document DateRangeValue type (though with incorrect additions to non-date components)

Reviewed changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 18 comments.

Show a summary per file

File	Description
src/components/date-time-input/date-time-input.base.ts	New generic base class extracted from date-time-input, providing common functionality for date/time inputs
src/components/date-time-input/date-time-input.ts	Refactored to extend the new base class, removing duplicate code
src/components/date-range-picker/date-range-input.ts	New component implementing editable date range input with mask parsing and formatting
src/components/date-range-picker/date-range-picker.ts	Updated to integrate the new date-range-input component and handle its events
src/components/date-time-input/date-util.ts	Added DateRangePosition enum and DateRangePart interfaces for range-specific logic
src/index.ts	Updated export path for IgcDateTimeInputComponentEventMap
stories/*.stories.ts	Updated type definitions (with errors for non-date components)
Test files	Updated to use and test the new date-range-input component

Copilot · 2026-02-19T15:55:03Z

src/components/date-range-picker/date-range-picker.ts

      this._inputs[0]?.clear();
      this._inputs[1]?.clear();
+    } else {
+      this._input.value = null;


Line 633 is redundant. The value is already being set to null by line 628 (this.value = null), and then line 634 calls clear() which also sets the value to null. Consider removing line 633 as it's unnecessary duplication.

Suggested change

this._input.value = null;

Copilot · 2026-02-19T15:55:04Z

src/components/date-range-picker/date-range-picker-single.spec.ts

+    rangeInput = picker.renderRoot.querySelector(
+      IgcDateRangeInputComponent.tagName
+    )!;
+    rangeInput.renderRoot.querySelector('input')!;


This line queries for an input element but doesn't assign it to the input variable declared on line 42. This appears to be incomplete code. Consider removing this line or assigning the result to the input variable: input = rangeInput.renderRoot.querySelector('input')!;

Suggested change

rangeInput.renderRoot.querySelector('input')!;

input = rangeInput.renderRoot.querySelector('input')!;

Copilot · 2026-02-19T15:55:04Z

stories/input.stories.ts

  /** The value of the control. */
-  value: string | Date;
+  value: string | Date | DateRangeValue;


The type annotation is incorrect. IgcInputComponent only accepts string values, not DateRangeValue. This interface should match the actual component implementation where value is of type string.

Copilot · 2026-02-19T15:55:04Z

stories/date-time-input.stories.ts

+    value: {
+      type: 'string | Date | DateRangeValue',
+      description: 'The value of the input.',
+      options: ['string', 'Date', 'DateRangeValue'],
+      control: 'text',


The type annotation is incorrect. IgcDateTimeInputComponent accepts Date | string | null, not DateRangeValue. The value property in the component is of type Date | null. This should be reverted to type: 'string | Date' and the DateRangeValue option removed from the options array.

Copilot · 2026-02-19T15:55:05Z

stories/date-time-input.stories.ts

+  /** The value of the input. */
+  value: string | Date | DateRangeValue;


The type annotation is incorrect. IgcDateTimeInputComponent accepts Date | string | null, not DateRangeValue. This interface should match the actual component implementation.

Copilot · 2026-02-19T15:55:07Z

stories/file-input.stories.ts

  /** The value of the control. */
-  value: string | Date;
+  value: string | Date | DateRangeValue;


The type annotation is incorrect. IgcFileInputComponent only accepts string values, not DateRangeValue. This interface should match the actual component implementation.

Copilot · 2026-02-19T15:55:07Z

src/components/date-range-picker/date-range-picker.ts

        ?invalid=${live(this.invalid)}
        .disabled=${this.disabled}
+        .inputFormat=${live(this.inputFormat)}
+        .displayFormat=${live(format)}


The igc-date-range-input component is missing the .locale and .prompt properties that are being passed to the igc-date-time-input components in the two-input mode (see lines 1133-1134). These properties should be passed to ensure consistent behavior between single and two-input modes.

Suggested change

.displayFormat=${live(format)}

.displayFormat=${live(format)}

.locale=${this.locale}

.prompt=${this.prompt}

Copilot · 2026-02-19T15:55:07Z

src/components/date-range-picker/date-range-picker.ts

        ?invalid=${live(this.invalid)}
        .disabled=${this.disabled}
+        .inputFormat=${live(this.inputFormat)}
+        .displayFormat=${live(format)}


The igc-date-range-input component is missing the .min and .max properties that are being passed to the igc-date-time-input components in the two-input mode (see lines 1137-1138). These properties should be passed to ensure date validation works consistently between single and two-input modes.

Suggested change

.displayFormat=${live(format)}

.displayFormat=${live(format)}

.min=${this.min}

.max=${this.max}

Copilot · 2026-02-19T15:55:08Z

stories/input.stories.ts

    value: {
-      type: 'string | Date',
+      type: 'string | Date | DateRangeValue',
      description: 'The value of the control.',
-      options: ['string', 'Date'],
+      options: ['string', 'Date', 'DateRangeValue'],


The type annotation is incorrect. IgcInputComponent only accepts string values, not DateRangeValue. The value property is defined as string in the component implementation. This should be reverted to type: 'string' and the DateRangeValue option removed from the options array.

Copilot · 2026-02-19T15:55:08Z

src/components/date-time-input/date-time-input.base.ts

+  }
+
+  protected setToday() {
+    this.value = new Date() as TValue;


The setToday method casts new Date() to TValue, but when TValue is DateRangeValue | null, this cast is incorrect. For date range inputs, setting today should create a range with both start and end set to today. Consider making this method abstract and implementing it in the concrete classes, or add logic to check the value type and handle DateRangeValue appropriately.

Suggested change

this.value = new Date() as TValue;

const today = new Date();

const currentValue = this.value as unknown;

if (

currentValue !== null &&

typeof currentValue === 'object' &&

'start' in currentValue &&

'end' in currentValue

) {

this.value = { start: today, end: today } as TValue;

} else {

this.value = today as TValue;

}

… it to compiling state - wip

poc editable date range input

18aef58

ddaribo requested a review from rkaraivanov June 9, 2025 13:15

rkaraivanov added enhancement New feature or request date-range-picker labels Jun 10, 2025

ddaribo and others added 6 commits June 10, 2025 17:46

Merge branch 'master' into bpachilova/range-editable-date-input

ee9d1fc

Merge branch 'master' into bpachilova/range-editable-date-input

8870280

feat(drp): handle the alt + arrow down/up focus properly for single i…

773dc52

…nput; add test for both input modes

Merge branch 'master' into bpachilova/range-editable-date-input

73f897e

Merge branch 'master' into bpachilova/range-editable-date-input

cb12b8a

Merge branch 'master' into bpachilova/range-editable-date-input

5ee269f

ddaribo marked this pull request as ready for review July 15, 2025 06:58

ddaribo added 4 commits July 28, 2025 15:36

Merge branch 'master' into bpachilova/range-editable-date-input

cb41172

Merge branch 'master' into bpachilova/range-editable-date-input

2b29c4a

Merge branch 'master' into bpachilova/range-editable-date-input

7ca2d82

Merge branch 'master' into bpachilova/range-editable-date-input

3a366f7

kdinev requested a review from Copilot February 19, 2026 15:46

kdinev added the date-range-input label Feb 19, 2026

Copilot started reviewing on behalf of kdinev February 19, 2026 15:47 View session

Copilot AI reviewed Feb 19, 2026

View reviewed changes

ddaribo force-pushed the bpachilova/range-editable-date-input branch from b58c49d to 3a366f7 Compare February 20, 2026 12:53

ddaribo marked this pull request as draft February 20, 2026 14:09

ddaribo and others added 2 commits February 20, 2026 16:29

Merge branch 'master' into bpachilova/range-editable-date-input & get…

c8c3a68

… it to compiling state - wip

Merge branch 'master' into bpachilova/range-editable-date-input

adf7e14

ddaribo mentioned this pull request Feb 26, 2026

Editable date range input #2114

Open

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add editable date range input#1733

Add editable date range input#1733
ddaribo wants to merge 13 commits intomasterfrom
bpachilova/range-editable-date-input

ddaribo commented Jun 9, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 19, 2026

Uh oh!

Copilot AI Feb 19, 2026

Uh oh!

Copilot AI Feb 19, 2026

Uh oh!

Copilot AI Feb 19, 2026

Uh oh!

Copilot AI Feb 19, 2026

Uh oh!

Copilot AI Feb 19, 2026

Uh oh!

Copilot AI Feb 19, 2026

Uh oh!

Copilot AI Feb 19, 2026

Uh oh!

Copilot AI Feb 19, 2026

Uh oh!

Copilot AI Feb 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	rangeInput.renderRoot.querySelector('input')!;
	input = rangeInput.renderRoot.querySelector('input')!;

		/** The value of the input. */
		value: string \| Date \| DateRangeValue;

-    this.value = new Date() as TValue;
+    const today = new Date();
+    const currentValue = this.value as unknown;
+    if (
+      currentValue !== null &&
+      typeof currentValue === 'object' &&
+      'start' in currentValue &&
+      'end' in currentValue
+    ) {
+      this.value = { start: today, end: today } as TValue;
+    } else {
+      this.value = today as TValue;
+    }

Conversation

ddaribo commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ddaribo commented Jun 9, 2025 •

edited

Loading