KendoUI DatePicker Clear Button

[Sebastian]

Hello

we use <kendo-datepicker> to select "from" and "to" dates. But these fields are not mandatory and the user should be able to clear the date fields manually. Does Kendo DatePicker component provide an easy way to clear a selected date? Something like an X icon inside the input area or a CLEAR button inside the popup, e.g. beside the TODAY link?

Best regards

Sebastian

[Georgi Krustev]

Hello Sebastian,

The DatePicker enables the users to clear the picked/typed value using the keyboard DEL or BACKSPACE keys. Right now, it doesn't provide any shortcut button that will behave as "X" clear input button.

Nevertheless, you can easily extend the current rendering and add a "X" clear button with a custom Directive. Here is a simple plunkr demo that demonstrates this approach:

https://plnkr.co/edit/WdAtBBnmGP5geOJQciRj?p=preview

Please note that you can modify the directive in any means in order to achieve your business requirements.

Regards,
Georgi Krustev
Progress Telerik

[Daniel]

this does not appear to work anymore. You can't assign null to the component.value. Component does not have an element property. You can't emit null from the component.ValueChange.

[Yanmario]

Hi Daniel,

From version 16.0.0 the DateInputs officially support a clear button functionality: 

https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DatePickerComponent/#toc-clearbutton

Regards,
Yanmario
Progress Telerik