Can a single TimePicker accept multiple time formats?

[Thomas]

We need the TimePicker to retain all of its default behavior with the addition of accepting multiple format types when a user manually enters data. For example, if the user chooses a date from the popup it will show the date with the default format, but we want the user to also type in varying formats such as '7a' or '7pm'. Is it possible to add multiple accepted input formats to a TimePicker?



Required time formats:

 

1. 7:00am
2. 7:00a
3. 7am
4. 7a
5. 7:00pm
6. 7:00p
7. 7pm
8. 7p
9. 19:00

 

[Wissam]

Hello, Thomas,

I have to say that this requirement is not available out of the box and requires a custom implementation.

Basically, the TimePicker component exposes the format property, therefore, you can set its value to a state variable and modify it based on the inputted value `event.value` from the onChange event, or from other properties of the onChange event.

For more information on setting the format, and handling the component in controlled mode, you can check the following articles:

• https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/formats/
• https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/controlled-state/

If you have any further questions on this matter, please let me know.

Regards,
Wissam
Progress Telerik