Add floating labels on the DatePicker and DateTimePicker

ADMIN

Carl

Posted on: 27 May 2021 16:56

Hey everyone!

To update anyone following this item, as well as anyone landing on this page at a later time, with the 4.6.0 release of KendoReact (or R2 2021 for those more familiar with the regular Kendo UI releases) we introduced built-in floating labels for both the DatePicker and DateTimePicker:

KendoReact DatePicker - Floating Labels demo

KendoReact DateTimePicker - Floating Labels demo

With this update I'm not marking this item as complete!

Regards,

Carl
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

John

Posted on: 23 Mar 2021 14:29

Great thanks!

ADMIN

Stefan

Posted on: 23 Mar 2021 07:20

Hello, John,

The feature is already planned, there is no need for extra votes.

In fact, it was planned a couple of months ago, but unfortunately, there were other high-priority tasks that came in the middle of the planning and this feature had to be postponed as it has a workaround.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

John

Posted on: 22 Mar 2021 19:09

Any update for the upcoming 2 year anniversary of this feature request? Thanks! Is it still considered or waiting on upvotes?

ADMIN

Stefan

Posted on: 29 Jun 2020 07:22

Hello, Abhilash,

Thank you for noticing this.

This occurs as we are passing directly a function in the render, but React does not keep function references for function inside render or in functional components.

In this case, we have to make the custom component outside of the app component and pass the needed custom props via the React context:

https://stackblitz.com/edit/react-gmieju-vgxeiy?file=app/main.jsx

Still, as I mentioned this is only a workaround and it is not fully tested, the official support will be available after the DatePicker is updated.

Regards,
Stefan
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

Abhilash

Posted on: 26 Jun 2020 15:15

Hi Stefan,

Thank you so much for your help, But it's automatically loosing the focus when we are entering a year(yyyy)(refer to attached picture). Please help me on that

ADMIN

Stefan

Posted on: 26 Jun 2020 12:01

Hello, Abhilash,

This will require changing the logic for the custom input to show the standard input only before focus and adding the required format placeholder:

https://www.telerik.com/kendo-react-ui-develop/components/dateinputs/datepicker/placeholders/

This is the modified example:

https://stackblitz.com/edit/react-gmieju-vgxeiy?file=app/main.jsx

Regards,
Stefan
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

Abhilash

Posted on: 26 Jun 2020 00:30

Hi Stefan,

Thank you very much for the reply, it works great and as expected. But, one last thing is I'm trying to show the default as mm/dd/yyyy instead of 12/31/1969. Tried various things using placeholders, but it ended up with the date. Pleas help me on that.

Thank you,

Abhilash Rainchu

ADMIN

Stefan

Posted on: 25 Jun 2020 05:48

Hello, Abhilash,

After we added the labels package in the last release this is possible with some modifications:

https://stackblitz.com/edit/react-gmieju?file=app/main.jsx

Still, we are planning some modifications this quarter for the DatePicker/DatetimePicker that will also allow the floating label to wort out of the box, this is why this item is still not considered as completed on our end.

Regards,
Stefan
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

Abhilash

Posted on: 24 Jun 2020 22:22

Hey Stefan, Do you have any update on ETA, Adding a floating labels in the DatePicker?

ADMIN

Stefan

Posted on: 27 Feb 2020 09:41

Hello, Anthony,

This is in our ToDo list.

The specific ETA will strongly depend on the complexity of the task and other priority tasks that occur.

We will update the status, once we have a more specific date.

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

Anthony

Posted on: 24 Feb 2020 20:59

When will this occur? It separates the common functionality of other form fields from this one? In addition, the TextArea is lacking as well. I would hope these two items will be addressed soon.

Ofer

Posted on: 09 Jan 2020 14:37

In a screen where all the fields have floating labels and only the date and or datetime pickers do not have it, it looks very unprofessional.

Please add it soon.