Kendo-angular: Kendo date-picker placeholder is not rendered properly if it contains a conditional text

[hidegh]

I'm submitting a...

Bug report

Current behavior

i have a placeholder set up with ngModel binding
the placeholder text is conditional based on a flag
even with flag turned on and no value in input, placeholder is not shown
when i enter then leave input, placeholder get's displayed
seems the flag (b) change does not get's reflected inside the control

same behaviour with {{ }}

see sample:
https://stackblitz.com/edit/kendo-datepicker-dynamic-placeholder-issue?file=app/app.component.ts

Expected behavior

if there's no date selected, input should react to binding changes and display placeholder accordingly

Minimal reproduction of the problem with instructions

Try stackblitz sample

[elena-gancheva]

Hi @hidegh, thanks for logging this issue. The fix is merged and will be available in the latest dev version of the package.

[ipeshev]

We need to get in account the special case when , the placeholder is empty string .

[hidegh]

@ipeshev assume empty string means nothing to display, so it's the same as no placeholder, right? at least the link with sample in my case does (should) work this way. the only issue was that when i changed the placeholder's value via binding, the refresh did not occure. if you wan't to check out the desired behaviour it's simple: press button, enter the datetime control, leave it and the newly assigned placeholder (or no placeholder in case of empty string) will be rendered (refreshed)

[elena-gancheva]

Hi @hidegh, could you please provide information what are your expectations about the behavior when binding placeholder property of a kendo-datepicker component. I am proposing this behavior:

• If you bind empty string placehoder="", the input will be empty and the default input mask month/day/year will not be rendered;
  Example: <kendo-datepicker placeholder=""></kendo-datepicker>
  Image:
  

• If you have not given any placeholder property, the input will render the default input mask month/day/year;
  Example: <kendo-datepicker></kendo-datepicker>
  Image:
  

• If you have dynamic binding: [placeholder]="flag? 'a' : 'b'", the input will render the value, accordingly to the flag.
  Example: <kendo-datepicker [placeholder]="flag? 'flag is true' : 'flag is false'"></kendo-datepicker>
  Image:
  
  

Do these cases meet your needs?

[hidegh]

@elena-gancheva

actually the "if you bind empty string placehoder="", the input will be empty and the default input mask month/day/year will not be rendered;" is something i'd advocate against, reasons:

1. removes the possibility to use [placeholder]="flag? 'show placeholder' : ''" and have no placeholder and default value if placeholder value is empty
2. if someone does not want to have "the default input mask month/day/year;" in the control displayed, then maybe he should use the input which is intended to alter the "month/day/year" string.

so I think to the rule i've sent to @ipeshev: "assume empty string means nothing to display, so it's the same as no placeholder, right?"

the rest of your samples should be fine.

so just a summary: if i use [placeholder]="", please consider it as if there was no placeholder set

[elena-gancheva]

@hidegh
Thanks for your input. The fix is merged and will be available in the latest dev version.

[ipeshev]

@hidegh currently if we have empty string , the default mask is displayed. Switching is working correct without need to focus-blur input.

[ipeshev]

Fix available in latest development version.

[elena-gancheva]

Shipped with v3.5.0 of the package.