Kendo datepicker control is not getting binded to label

Question

This is my code

dynamic id is getting generated for input tag but in the for attribute of label tag it says [Object object]

any help would be appreciated, thank you.

Answer 1

When I checked the template variable, I found focusableId property which contains the input id. This can be set inside for attribute solves your issue.

When you click on the label the datepicker will get focussed!

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
        <div class="example-config">
            Selected value is: {{value | kendoDate:'MM/dd/yyyy'}}
        </div>
        <div class="example-wrapper" style="min-height: 400px">
            <label [for]="rDatePicker.focusableId">Select a date:</label>
            <kendo-datepicker id="date" name="date" #rDatePicker
                [(value)]="value"
            ></kendo-datepicker>
        </div>
    `,
})
export class AppComponent {
  public value: Date = new Date(2000, 2, 10);
}

stackblitz

Answer 2

The Kendo UI for Angular library has dedicated Label and FloatingLabel components designed to associate a label with a complex component in which the actual focusable element is nested in the component rendering:

https://www.telerik.com/kendo-angular-ui-develop/components/labels/label/association/