ngx-timepicker-field 添加清除按钮

Question

我正在使用 ngx-material-timepicker ngx-timepicker-field 创建多个时间选择器。

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

时间选择器工作正常，但我需要向 clear/reset 输入添加一个清除按钮。

类似于默认 html 时间选择器的东西：

我已经搜索了文档，但找不到方法。

如何在时间选择器组件中添加这样一个清晰的按钮？

如果您需要其他信息，请告诉我。

Answer 1

根据 documentation，您可以操作 Value @Input() 字段并将其值设置为 null（如果您想要重置）。所以这样的事情可能会奏效：

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

并尝试将 myValue 设置为 null 并查看其作用：

@ViewChild('myPickerRef') NgxTimepicker(or whatever) myTimePicker;
...
myTimePicker.value = 0;

（我没有检查代码，如果你提供一个stackblitz示例，我可以尝试在其中创建一个解决方案）

Answer 2

虽然我认为从用户的角度来看，拥有一个单独的按钮完全没问题，但如果您需要扩展库的功能而不分叉其源代码，则必须采取某种变通方法。

我会尝试这样的事情：根据 documentation，您可以使用 @Input() cancelBtnTmpl: TemplateRef 将 cancelButton 的模板引用更改为您自己的实现：切换默认取消按钮后，您可以实现时间值的重置功能，如我的其他答案中所述。