How to hide Angular DatePicker date format prompt?

Question

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.

George K · Accepted Answer · 2017-11-13 15:01:23Z

1

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.

edited Nov 13, 2017 at 15:01

answered Nov 2, 2017 at 11:15

George K

1,7631 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

zchpit Over a year ago

I have run yourt plunker on chrome and shows nothing on preview :(

George K Over a year ago

This is strange. It seems to work on my end - screencast.com/t/244mTlyVr . Another option is to just build a simple Angular app using the @progress/kendo-angular-dateinputs@dev package.

George K Over a year ago

I found the issue - the plunker used intranet link. The demo is updated and should work as expected. – George K 4 hours ago

zchpit Over a year ago

Thanks. Now it works. placeholder=" " is almost what I need.

Saurabh Agrawal · Accepted Answer · 2017-10-31 12:30:05Z

1

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.

answered Oct 31, 2017 at 12:30

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

Comments

Vitalii Chmovzh · Accepted Answer · 2017-10-31 19:14:21Z

1

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.

answered Oct 31, 2017 at 19:14

Vitalii Chmovzh

2,9534 gold badges18 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to hide Angular DatePicker date format prompt?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related