Under Review
Last Updated: 19 Feb 2021 09:02 by ADMIN
Alexander
Created on: 08 Feb 2021 19:28
Type: Feature Request
0
Add a button to clear the date value for the DatePicker and DateInput React components

The DatePicker and DateInput React components miss the customizable button to clear the date value.

 

Would be nice to have ability to customize the icon, size, margins and a selectable option to clear the date value to null or a default value (as set to the component) or bind a custom event handler.

 

6 comments
ADMIN
Stefan
Posted on: 19 Feb 2021 09:02

Hello, Alexander,

This is a known cause and it is planned for improvements.

The main issue is that until the user inputs a valid value, the DateInput value is considered unchanged (null). Then even if we are setting it back to null, the input stays.

More details can be seen here:

https://github.com/telerik/kendo-react/issues/705

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/.

Alexander
Posted on: 18 Feb 2021 22:09

here are the screens

 

Alexander
Posted on: 18 Feb 2021 22:07

Hello, Stefan

We tried the officially supported way to add a clear button.

 

In your example, if we set the initial value to null and then user enters only the 'year' component of the date, 

leaving the placeholder intact for the day and month parts, and then user hits the "clear" button, then the date is not cleared.

 

Please check it here

https://stackblitz.com/edit/react-8dqy6j-gvgwtk?file=app%2Fmain.jsx 

 

Screenshots are attached.

ADMIN
Stefan
Posted on: 10 Feb 2021 06:08

Hello, Alexander,

Currently, this is the officially supported way to achieve this.

Still, we are constantly trying to improve the components, and in the future, we may and a built-in option to add the clear button.

I will leave the status of the request open, to monitor if the current approach is helpful or the community prefers a built-in option.

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/.

Alexander
Posted on: 09 Feb 2021 15:57

Thank you, Stefan, for the showcase of the customization for the toggle button and "clear" button implementation.

This is really helpful!

Should we treat this customization as temporary, meaning that it might be replaced with the out-of-the-box implementation in the future versions of the DatePicker react component?

Or are there no plans to add this "clear" button to the DatePicker API and hence we should consider this customization as permanent?

ADMIN
Stefan
Posted on: 09 Feb 2021 11:59

Hello, Alexander,

This can be currently achieved by customizing the toggle button, rendering an x icon next to it, and updating the state value when it is clicked:

https://www.telerik.com/kendo-react-ui-develop/components/dateinputs/datepicker/custom-rendering/#toc-customizing-the-toggle-button

I made an example showcasing this:

https://stackblitz.com/edit/react-8dqy6j?file=app%2FcustomToggleButton.jsx

I hope this is helpful.

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/.