Does the DateTimePicker supports "steps" for time selection?

[ccacdi]

I try to use v-bind:steps="{ hour: 1, minute: 15 }" but turns out it doesn't have any effect.

I would like to make sure if it is not supported or I have misconfigured.

 

Thanks!

[Petar]

Hi Ccacdi,

You are correct. The DateTimePicker has its steps prop. By default, the DateTimePicker increments or decrements each part of its date and time values by one step. The steps configuration defines the steps of the different date and time parts. Below are the available options we can bass to the steps prop.

• year: Number—Controls the incremental step of the year value.
• month: Number—Controls the incremental step of the month value.
• day: Number—Controls the incremental step of the day value.
• hour: Number—Controls the incremental step of the hour value.
• minute: Number—Controls the incremental step of the minute value.
• second: Number—Controls the incremental step of the second value.

This StackBlitz example demonstrates how the discussed prop can be configured and used. To test the configuration, click on the input of the component and select a date/time part of it. Press the Arrow UP/Down keys and see how the values are changing. Attached, you will find a short video demonstrating the functionality.

I hope the above details, sample project, and video will help you better understand how the steps prop works. 

Regards,

Petar
Progress Telerik

[ccacdi]

I see what I have missed, I was expecting the time menu option also reflect to the steps option. Similar to the TimePicker, when setting minute to 15, the minute option menu only shows [5, 10, 15, 20,.....].
(Because mobile devices can't make use of the arrow keys)

Thanks!

[Petar]

I am happy to hear that the DateTimePicker configuration is more clear now!

Based on your reply, I would assume that the current thread can be closed. I will close it now but if you need further assistance, you can reopen the ticket any time.