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