Anlgular 2 – Kendo UI Datepicker default input placeholder

Issue

I’m using the new [Datepicker from telerik Kendo UI][1]

The datepicker is working great but I have 1 problem, when my date value is not defined it displays undefined like this:

[![enter image description here][2]][2]

However looking at [this plunker][3] I see that it’s possible to display a default value, but I can’t figure out how.

here’s my current code:

<kendo-datepicker id="pickDateStart"
                  #pickDateStart="ngModel"
                  name="pickDateStart"                                             
                  [format]="'dd/mm/yy'"
                  [(value)]="absenceReservation.StartDate"
                  [(ngModel)]="absenceReservation.StartDate"
                  [class.has-error]="pickDateStart.invalid && showValidation"
                  [tooltip]="errors_startDate"
                  [isDisabled]="!showValidation"
                  (valueChange)="setDateRange($event)"
                  placement="bottom"
                  ngModel required>

</kendo-datepicker>

<template #errors_startDate>
    <div *ngIf="pickDateStart.errors?.required">
        <i class="fa fa-exclamation-circle"></i> {{"itemIsRequired" | translate }}
    </div>
</template>

How can I display a default placeholder in the input field, or the date format (something cleaner then "Undefined")
[1]: https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/
[2]: https://i.stack.imgur.com/KpP3l.png
[3]: https://embed.plnkr.co/jYcy8YUTVePlUUDJspwA/

Solution

The proper culture data should be loaded in order to display the correct placeholder messages. A through discussion on the topic can be found in this Github issue:

https://github.com/telerik/kendo-angular/issues/499

Here you can find a working example:

https://github.com/telerik/kendo-angular/issues/499#issuecomment-297393561

Answered By – George K

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.