Unplanned
Last Updated: 29 Jun 2020 07:22 by ADMIN
Marco Antonio
Created on: 03 Apr 2019 07:00
Type: Feature Request
8
Add floating labels on the DatePicker and DateTimePicker
Add floating labels on the DatePicker and DateTimePicker.
9 comments
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.