Date Range Picker generated with incorrect two-input template does not open calendar

[georgianastasov]

Description

When the application is generated by our MCP server, the igx-date-range-picker is created with igx-input-group wrappers and a plain icon inside igx-prefix instead of using igx-picker-toggle. As a result, the two-input date range picker is rendered, but clicking it does not open the calendar popup.

What is wrong

The generated markup uses a visual icon only, not the actual picker toggle control.

This pattern is incorrect:

<igx-date-range-start>
  <igx-input-group>
    <input igxInput igxDateTimeEditor placeholder="Start date" />
    <igx-prefix>
      <igx-icon>date_range</igx-icon>
    </igx-prefix>
  </igx-input-group>
</igx-date-range-start>

Why it fails

• igx-prefix + igx-icon only renders an icon
• it is not wired to open the picker
• igx-input-group should not wrap the date range start/end content in this setup

Expected structure

The correct two-input pattern is to place the input directly inside igx-date-range-start and igx-date-range-end, and use igx-picker-toggle if the calendar should open from an icon.

<igx-date-range-start>
  <igx-picker-toggle igxPrefix>
    <igx-icon>calendar_today</igx-icon>
  </igx-picker-toggle>
  <input igxInput igxDateTimeEditor type="text" placeholder="Start date" />
</igx-date-range-start>

<igx-date-range-end>
  <igx-picker-toggle igxPrefix>
    <igx-icon>calendar_today</igx-icon>
  </igx-picker-toggle>
  <input igxInput igxDateTimeEditor type="text" placeholder="End date" />
</igx-date-range-end>

Root cause

The generated template does not follow the required Ignite UI two-input date range picker structure.

It generates this:

<igx-prefix>
  <igx-icon>date_range</igx-icon>
</igx-prefix>

but it should generate this:

<igx-picker-toggle igxPrefix>
  <igx-icon>calendar_today</igx-icon>
</igx-picker-toggle>

Summary

The issue is caused by incorrect template generation in the MCP server:

• igx-input-group is used where it should not be
• a plain icon is generated instead of igx-picker-toggle
• because of that, the picker UI is visible, but the calendar does not open