step

stepnumber

Sets or gets the number of minutes the time picker steps.

Setting the step property defines the stepping behavior of the time picker. The stepping behavior is also dependent on the input option type chosen in the Time Input Settings panel in the Editor.

TimePicker input options

The input option types include the following:

  • Text only: When input focus is on the minutes, the keyboard up and down arrows increment and decrement the minutes by the step value. When the input focus is on the hours, the hour increments and decrements by 1 hour, regardless of the step value.
  • Stepper: The stepper buttons increment and decrement the minutes by the step value. When the input focus is on the hours, the hour increments and decrements by 1 hour, regardless of the step value. The keyboard up and down arrows work as above.
  • Dropdown: The dropdown contains times where the difference between each time is the step value in minutes. For example, if the step value is '10', the dropdown will contain 11:00, 11:10, 11:20, etc.

Set the step value to a number between 1 and 60.

You can also set an element's step property in the Editor using the Settings panel.

Getting the step property returns the current step value.

Setting the enabledTimes property changes the way step behaves. The input time options will change based on what startTime is set to. For example, if the step value is '10', startTime is '11:00', and endTime is '11:30', the input time options will include '11:00', '11:10', and '11:20'. If the step value is '10', startTime is '11:05', and endTime is '11:30', the input time options will include '11:05', '11:15', and '11:25'.

Was this helpful?
Yes
No