1 Answer, 1 is accepted
Hi Ali,
The Kendo UI for Angular suite provides the TimePicker component as a part of the DateInputs package. Further details and examples are available in the following documentation section:
https://www.telerik.com/kendo-angular-ui-develop/components/dateinputs/timepicker/
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Hello Ali,
I am not sure what is meant by the last comment, but the TimePicker component opens a dropdown list of options for choosing the hour, minutes, and AM/PM sections of the date:
If the requirement is to keep the dropdown list of options at all times, this could be achieved by opening the component programmatically using the toggle method and preventing the close event, for example:
https://stackblitz.com/edit/angular-hezryy?file=app/app.component.ts
Rank 1
Iron
Hello,
Thank you for explaining further. The design of the dropdown list containing the time options is as seen in the demos and the screenshot in my previous comment - by default there are two scrollable sections for choosing hour and minutes, and one for AM/PM. Depending on the set format, the dropdown may include scrollable sections for seconds and milliseconds too:
https://www.telerik.com/kendo-angular-ui-develop/components/dateinputs/timepicker/formats/
A dropdown containing custom time representations (as seen in the provided screenshot) is not supported. In theory, it can be achieved by using a TimePicker component with prevented open event, and a custom Popup attached to it that can be shown/hidden programmatically when appropriate. When a value is chosen from the Popup content, the value of the TimePicker can be updated programmatically. All custom logic associated with creating the custom Popup and its content as well as the logic for opening and closing it, and enabling the desired end user interaction is in the hands of the developer.
The following documentation links might prove useful in the development of the described customization:
https://www.telerik.com/kendo-angular-ui-develop/components/dateinputs/timepicker/forms/
https://www.telerik.com/kendo-angular-ui-develop/components/dateinputs/timepicker/events/
https://www.telerik.com/kendo-angular-ui-develop/components/popup/
https://www.telerik.com/kendo-angular-ui-develop/components/popup/aligning-positioning/