Search code examples
angularresettimepicker

ngx-timepicker-field add clear button

I am using ngx-material-timepicker ngx-timepicker-field to create several time pickers.

 <ngx-timepicker-field [format]="24"></ngx-timepicker-field>

enter image description here

The time picker are working just fine, but i need to add a clear button to clear/reset the input.

Something similar to the default html timepicker:

enter image description here

I already searched the docs but couldn't find a way to to it.

How to add such a clear button to the timepicker component?

Let me know if you need additionally information.

Solution

  • Although I think having a separate button is completely fine in a user perspective, but if you need to extend the functionality of the lib without forking it's source code, you gotta do some kind of a workaround.

    I would try something like this: According to the documentation you can change the cancelButton's template ref with the @Input() cancelBtnTmpl: TemplateRef to your own implementation: after you switch the default cancel button you can then implement a reset functionality to the time value, as described in my other answer.