FluentTimePicker - step attribute

[ZnowuJa]

Hi,
It would be great to have a "step" attribute in FluentTimePicker that will allow to show only some "periods" from time. For example step = 900 will show only each 15 minutes like 00, 15, 30, 45, while step = 600 will show only each 10 minutes like 00, 10, 20, 30, 40, 50.
Regards

[vnbaaij]

Hi,

We use the standard browser time picker for this. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time

The docs mention a step attribute but both Edge and Firefox are not picking that up.

[dvoituron]

I did not yet tried, but this component is based in the standard input field where type="time". So maybe the step attribute can be used.

[ZnowuJa]

Well, I tried it before I started this topic.

                <FluentTimePicker Value="@SelectedTimeTo.ToDateTimeNullable()"
                                  ValueChanged="@(e => SelectedTimeTo = e.ToTimeOnlyNullable())"
                                  Style="width: 150px"
                                  Step = "900"
                />

It doesn't crash component, but also it makes no effect.
It is just "nice to have".

[dvoituron]

Indeed, I verified the source code and this attribute is not send to the webcomponents (used by our component). That could be a good addition.

[vnbaaij]

We can (and should) send it to the components we use but, as I mentioned, I've not seen browsers doing anything with it once it is set on the native component

[ZnowuJa]

Great improvement would be also if the "step" attribute would additionally filter "dropped-down" list of available for selection minutes.
Currently in type="time" step works only for keyboard strokes. User still can select any minute.
In fact there is additional question :). When to start step? From which minute? Could be also additional attribute.

[vnbaaij]

@ZnowuJa just to be clear, we do not control what is displayed on the screen and how that operates. That part is done by a native browser component (input type="time"). So things like filtering the drop down are not possible unless the native components allows for that.