There are a few ways you might be able to approach this and some depend on what you want the output to be. Just one thought, you can still use classic in O365, but would then have to design your mobile and tablet templates (one of the benefits of responsive).
Option 1: you could create a single dropdown for the number to represent the times so that it gives a block of allowed times if you want to keep them separate from the date.
Option 2. you could frame it in a responsive form, just as you have in your screenshot, restrict the selections to drop downs so that the user can only select 12 or 24 as the hour and then 00 to 60 for the minutes.
Both options are possible. For the backend, you don't need to push this to a date/time field since the available times would be different from the date. You could try and pull all the data together into a string and then set the date value with the string, but I would be cautious about that as you may be overcomplicating it.
Hope that helps.