CODEWITHSUNDEEP
angularkendo-uidatepickerkendo-ui-angular2
zchpit
zchpit

Reputation: 3121

How to hide Angular DatePicker date format prompt?

How to hide default date format description in KendoUi Angular DatePicker: https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/#toc-formats

In example, usual datepicker code is like:

<kendo-datepicker [value]="value"></kendo-datepicker>

and when "value" is null or empty it shows you a prompt:

month/day/year

How to hide that prompt?

EDIT: This functionality is being in development. It should be realesed soon.

Upvotes: 0

Views: 1881

Answers (3)

George K
George K

Reputation: 1763

With the latest changes in the DateInput (as of v1.4.0-dev) two additional properties were added:

  • placeholder - display text hint (related Github issue)
  • formatPlaceholder - control description of the format sections (Github issue)

With those available, we can easily hide or modify the displayed format description:

<kendo-datepicker [placeholder]="Enter date..." [formatPlaceholder]="short" />

Here is a plunker demo that demonstrates those new properties:

http://plnkr.co/edit/XYmwDjkpp7Mb4txlmc2L?p=preview

Note, that the described functionality is available only in the @dev channel. It should be released soon though.

EDIT: @progress/[email protected] is officially released. Just use 1.4.0 or above to utilize some of the mentioned options.

Upvotes: 1

Vitalii Chmovzh
Vitalii Chmovzh

Reputation: 2943

I think there's no way to do this programmatically, however I have an idea of how to do that and I briefly tested it in Chrome Dev Tools.

Put some class on your datepicker component

<kendo-datepicker [ngClass]={'empty': !date }>

Then add styles 

.k-datepicker.empty input {
    text-indent: -9999px;
}

That should do the trick.

Upvotes: 1

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

The issue is with kendo datepicker place holder property.

The DateInput and DatePicker components expose a placeholder property incorrectly. By default, the date format string, e.g. month/day/year, is displayed.

You can get more details on #519.

Upvotes: 1

Related Questions