Custom DateInput Component Issue: Calendar Not Displaying in when using date range

[Layth]

I am experiencing an issue with the Kendo DateRange functionality in my Angular project. I am dynamically assigning the kendodaterangestartinput and kendodaterangeendinput attributes using a directive. While the attributes are correctly applied to the <kendo-dateinput> elements (verified in the DOM), the calendar is not showing when interacting with the input fields.

Here’s the directive I am using to dynamically assign the attributes

import { Directive, Input, Renderer2, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[dynamicDateRange]',
  standalone: true
})
export class DynamicDateRangeDirective implements OnInit {
  @Input() dynamicDateRange: 'start' | 'end' | null = null;

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit(): void {
    if (this.dynamicDateRange === 'start') {
      this.renderer.setAttribute(this.el.nativeElement, 'kendodaterangestartinput', '');
      this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangeendinput');
    } else if (this.dynamicDateRange === 'end') {
      this.renderer.setAttribute(this.el.nativeElement, 'kendodaterangeendinput', '');
      this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangestartinput');
    } else {
      this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangestartinput');
      this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangeendinput');
    }
  }
}

Here’s how I wrote the story component

<kendo-formfield [showHints]="showHints" [showErrors]="showErrors" [orientation]="orientation">
  <kendo-label [text]="label" [for]="dateinput" [hidden]="!showLabel"></kendo-label>
  <kendo-dateinput
    #dateinput
    [formControl]="control"
    [allowCaretMode]="allowCaretMode!"
    [autoCorrectParts]="autoCorrectParts"
    [autoFill]="autoFill"
    [autoSwitchKeys]="autoSwitchKeys"
    [autoSwitchParts]="autoSwitchParts"
    [clearButton]="clearButton"
    [disabled]="disabled"
    [enableMouseWheel]="enableMouseWheel"
    [fillMode]="fillMode"
    [format]="format"
    [formatPlaceholder]="formatPlaceholder"
    [incompleteDateValidation]="incompleteDateValidation"
    [inputAttributes]="inputAttributes!"
    [max]="max"
    [min]="min"
    [placeholder]="placeholder"
    [rangeValidation]="rangeValidation"
    [readonly]="readonly"
    [rounded]="rounded"
    [size]="size"
    [steps]="steps"
    [tabindex]="tabindex"
    [dynamicDateRange]="dateRangeType"
    [title]="title"
    [twoDigitYearMax]="twoDigitYearMax"
    [value]="value"
    (blur)="blur.emit($event)"
    (valueChange)="valueChange.emit($event)"
    (focus)="focus.emit($event)">
  </kendo-dateinput>
  <kendo-formhint [align]="hintAlign">
    <ng-content select="[hint]"></ng-content>
  </kendo-formhint>
  <kendo-formerror [align]="errorAlign">
    <ng-content select="[error]"></ng-content>
  </kendo-formerror>
</kendo-formfield>

Here’s how I use it in the template:

<kendo-daterange id="feed-filter-date-range" class="k-mt-4 k-justify-content-between">
  <mnp-date-input 
    label="start" 
    [dynamicDateRange]="'start'" 
    [control]="fromDate">
  </mnp-date-input>
  <div>
    <kendo-formfield>
      <mnp-label text="End" class="k-d-flex k-flex-col"></mnp-label>
      <kendo-dateinput 
        formControlName="toDate" 
        kendodaterangeendinput>
      </kendo-dateinput>
    </kendo-formfield>
  </div>
</kendo-daterange>

Despite the attributes being added dynamically, the calendar does not appear when interacting with the kendodaterangestartinput or kendodaterangeendinput fields. However, when I used the <kendo-dateinput> directly the attributes directly in the template, the calendar works as expected.

<kendo-daterange>
  <kendo-dateinput 
    formControlName="fromDate" 
    kendodaterangestartinput>
  </kendo-dateinput>
  <kendo-dateinput 
    formControlName="toDate" 
    kendodaterangeendinput>
  </kendo-dateinput>
</kendo-daterange>

[Yanmario]

Hi Layth,

An answer will be provided in the following thread as the questions are the same:

https://www.telerik.com/forums/issue-with-kendodaterangestartinput-and-kendodaterangeendinput-attributes-not

Please in the future avoid opening duplicate threads to keep things clear and organized in our forums. Thank you.