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

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

Closes #2114
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

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

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

stories/input.stories.ts

stories/date-time-input.stories.ts

stories/file-input.stories.ts

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

stories/input.stories.ts

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

… it to compiling state - wip

Copilot

Pull request overview

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

Comments suppressed due to low confidence (1)

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

_handleDateRangeInputChangeEvent assumes input.value is always non-null (input.value!). After calling clear() (or if the range input emits a change with null), this will throw when _swapDates is called. Handle the null case explicitly (e.g., set this.value = null and emit igcChange accordingly), and strongly type the event as CustomEvent<DateRangeValue | null> instead of any.

  protected _handleDateRangeInputChangeEvent(event: CustomEvent<any>) {
    event.stopPropagation();

    const input = event.target as IgcDateRangeInputComponent;
    const newValue = input.value!;

    const { start, end } = this._swapDates(newValue) ?? {
      start: null,
      end: null,
    };

    this._setCalendarRangeValues();
    this.value = { start, end };
    this.emitEvent('igcChange', { detail: this.value });
  }

Copilot · 2026-03-06T12:43:40Z

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

+  // #region Abstract methods and properties
+
+  protected abstract get _datePartDeltas(): any;
+


IgcDateTimeInputBaseComponent declares protected abstract get _datePartDeltas(): any;. This accessor signature both (1) forces subclasses to implement a getter (but IgcDateRangeInputComponent currently defines _datePartDeltas as a field) which causes a TS override error, and (2) loses type-safety via any. Make this an abstract property with a concrete type (e.g. protected abstract readonly _datePartDeltas: DatePartDeltas;) or keep it as a getter but ensure all subclasses implement it as a getter with DatePartDeltas return type.

Copilot · 2026-03-06T12:43:41Z

stories/file-input.stories.ts

 interface IgcFileInputArgs {
  /**
   * The value of the control.
   * Similar to native file input, this property is read-only and cannot be set programmatically.
   */
-  value: string | Date;
+  value: string | Date | DateRangeValue;
  /** Gets/Sets the locale used for getting language, affecting resource strings. */


DateRangeValue is referenced in IgcFileInputArgs.value (and in the argTypes string), but it isn’t imported in this file, which will cause a TypeScript compile error. Also, IgcFileInputComponent.value is string-only (read-only), so the story’s value type/options should be updated to match the real API.

Copilot · 2026-03-06T12:43:41Z

stories/date-time-input.stories.ts

 interface IgcDateTimeInputArgs {
-  /** The date format to apply on the input. */
-  inputFormat: string;
  /** The value of the input. */
-  value: string | Date;
+  value: string | Date | DateRangeValue;
  /** The minimum value required for the input to remain valid. */


DateRangeValue is referenced in IgcDateTimeInputArgs.value (and in the argTypes string), but it isn’t imported in this file, which will fail TypeScript compilation. IgcDateTimeInputComponent.value is Date | null (with string conversion via attribute), so the story should not include DateRangeValue as an option/type.

Copilot · 2026-03-06T12:43:41Z

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

@@ -21,7 +22,7 @@ describe('Date Range Picker Single Input - Form integration', () => {
  before(() => defineComponents(IgcDateRangePickerComponent));

  let picker: IgcDateRangePickerComponent;
-  let input: IgcInputComponent;
+  let input: IgcDateRangeInputComponentComponent;
  let startKey = '';


The imported type alias IgcDateRangeInputComponentComponent looks accidental and confusing (double “Component”). Prefer importing the type with the actual component name (or using typeof IgcDateRangeInputComponent) to keep the test typings clear.

Copilot · 2026-03-06T12:43:41Z

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

+  protected override _datePartDeltas: DatePartDeltas = {
+    date: 1,
+    month: 1,
+    year: 1,
+  };
+


_datePartDeltas is declared as an instance field here, but the base class (IgcDateTimeInputBaseComponent) defines _datePartDeltas as an abstract getter. This will fail to compile with “cannot override an accessor with a property”. Implement _datePartDeltas as a getter (or adjust the base class contract to be an abstract property) so the override shape matches.

Suggested change

protected override _datePartDeltas: DatePartDeltas = {

date: 1,

month: 1,

year: 1,

};

protected readonly _dateRangeDatePartDeltas: DatePartDeltas = {

date: 1,

month: 1,

year: 1,

};

protected override get _datePartDeltas(): DatePartDeltas {

return this._dateRangeDatePartDeltas;

}

Copilot · 2026-03-06T12:43:42Z

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

+export interface IgcDateTimeInputComponentEventMap extends Omit<
+  IgcInputComponentEventMap,
+  'igcChange'
+> {
+  igcChange: CustomEvent<Date | DateRangeValue | null>;
+}


IgcDateTimeInputComponentEventMap now types igcChange as CustomEvent<Date | DateRangeValue | null>. This makes the exported event map for igc-date-time-input too broad (it never emits DateRangeValue) and also makes igc-date-range-input appear to emit Date values. Consider making the base class generic over the igcChange detail type (separate event maps per component, or a generic IgcDateTimeInputEventMap<TValue>), so each component has accurate event typings.

Copilot · 2026-03-06T12:43:42Z

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

+   * Emits the input event after user interaction.
+   */
+  protected _emitInputEvent(): void {
+    this._setTouchedState();
+    this.emitEvent('igcInput', { detail: this.value?.toString() });


_emitInputEvent() emits igcInput with detail: this.value?.toString(). For IgcDateRangeInputComponent, value is an object, so this produces "[object Object]" rather than the actual text the user typed. Consider emitting the current input text (this._maskedValue) for igcInput, or provide an overridable formatter so each derived component can emit a meaningful string.

Suggested change

* Emits the input event after user interaction.

*/

protected _emitInputEvent(): void {

this._setTouchedState();

this.emitEvent('igcInput', { detail: this.value?.toString() });

* Returns the string detail to emit with the `igcInput` event.

* The default implementation prefers the masked value (what the user sees),

* and falls back to the underlying value's string representation.

* Derived components can override this to provide a more specific format.

*/

// eslint-disable-next-line @typescript-eslint/no-unused-vars

protected _getInputEventDetail(): string | undefined {

if (this._maskedValue != null) {

return this._maskedValue;

}

return this.value != null ? this.value.toString() : undefined;

}

/**

* Emits the input event after user interaction.

*/

protected _emitInputEvent(): void {

this._setTouchedState();

this.emitEvent('igcInput', { detail: this._getInputEventDetail() });

Copilot · 2026-03-06T12:43:42Z

stories/input.stories.ts

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


DateRangeValue is referenced in IgcInputArgs.value (and in the argTypes string), but it is not imported in this file, which will cause a TypeScript compile error. Also, IgcInputComponent.value is string (not DateRangeValue), so the story’s value type/options should be corrected to reflect the actual component API.

Suggested change

value: string | Date | DateRangeValue;

value: string;

Copilot · 2026-03-06T12:43:42Z

stories/mask-input.stories.ts

   * Regardless of the currently set `value-mode`, an empty value will return an empty string.
   */
-  value: string | Date;
+  value: string | Date | DateRangeValue;


DateRangeValue is referenced in IgcMaskInputArgs.value (and in the argTypes string), but it isn’t imported in this file, which will fail TypeScript compilation. Additionally, IgcMaskInputComponent.value is a string, so the story’s value type/options should not advertise Date/DateRangeValue unless the component actually supports those types.

Suggested change

value: string | Date | DateRangeValue;

value: string;

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 4 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

refactor(date-time): single input working, wip

52b4571

chore(drp): checkpoint

7d1f073

ddaribo mentioned this pull request Feb 26, 2026

Editable date range input #2114

Open

5 tasks

ddaribo added 3 commits February 26, 2026 17:25

chore(drp): working checkpoint

ae41f03

refactor(date-time-inputs): organize regions, remove redundancies

6c7e112

refactor(date-time-inputs): polishing and fixes

e416379

ddaribo linked an issue Mar 5, 2026 that may be closed by this pull request

Editable date range input #2114

Open

5 tasks

ddaribo and others added 6 commits March 5, 2026 15:52

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

3bd270e

chore(file-input): fix leftover circular import

bb4ad22

chore(*): fix has time/date-parts getter invocation

e5a9c67

test(drp): increase coverage

801fb1d

refactor(drp): validator to use new utility methods

6cef110

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

5c8cb91

ddaribo requested a review from Copilot March 6, 2026 12:29

Copilot started reviewing on behalf of ddaribo March 6, 2026 12:30 View session

Copilot AI reviewed Mar 6, 2026

View reviewed changes

		// #region Abstract methods and properties

		protected abstract get _datePartDeltas(): any;

-   * Emits the input event after user interaction.
-   */
-  protected _emitInputEvent(): void {
-    this._setTouchedState();
-    this.emitEvent('igcInput', { detail: this.value?.toString() });
+   * Returns the string detail to emit with the `igcInput` event.
+   * The default implementation prefers the masked value (what the user sees),
+   * and falls back to the underlying value's string representation.
+   * Derived components can override this to provide a more specific format.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  protected _getInputEventDetail(): string | undefined {
+    if (this._maskedValue != null) {
+      return this._maskedValue;
+    }
+    return this.value != null ? this.value.toString() : undefined;
+  }
+  /**
+   * Emits the input event after user interaction.
+   */
+  protected _emitInputEvent(): void {
+    this._setTouchedState();
+    this.emitEvent('igcInput', { detail: this._getInputEventDetail() });

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 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