angularkendo-uidatepickertelerikkendo-ui-angular2

Angular 2 - Kendo UI Datepicker default input placeholder

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.sstatic.net/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