Add a button to clear the date value for the DatePicker and DateInput React components

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.

Attached Files:

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