How can I set the starting time for the time input widget?

Issue

I'm working on web app and I use this custom component based on a classic <input type="time">

<ui-input type="time" step="900" value.bind="nbH">

It's basically the same as a classic <input>, in the context of my question, it doesn't change anything

<input type="time" step="900" id="appt-time" name="appt-time" value="13:30">

The problem is that I'm using this component like a field indicating the number of hours (less than 24 hours) and not like an indicator of the time.

So I would like to change the default value when you click the clock icon. I would like to choose a a fixed value by myself because I don't want the default value to be the current time. Is it possible?

And then, I would like the step to be used also for the display of the hours and minutes list when you click the clock icon, not just with the top and bottom arrows of the keyboard. So instead of display each minutes (in the right column), in my case it would display 00, 15, 30, 45. Is it possible?

I didn't find what I searched in the doc so I wanted to know if I can do these things without creating a new whole component.

Solution

The kind of customization you desire is AFAIK not supported by the standard <input type="time">. Also note that what is considered 'standard' may differ between browsers and sometimes even browser versions.

A custom component is most likely the way to go, possibly even based on <input type="text"> so you won't have to deal with "time" behaviour getting in the way of your custom actions.

Answered By - Peter B