---
title: "Angular Date & Time Setting time select steps Example | Mobiscroll"
component: "Date & Time"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/datetime/time-value-steps"
---

# Setting time select steps - Angular Date & Time demo

Angular Date and time demo with 5 and 15 minute steps. Control hour, minute and second steps. With source code. For Angular 22 and Ionic 8.

- [Live demo](https://demo.mobiscroll.com/angular/datetime/time-value-steps)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/datepicker/datetime/time-value-steps)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/datetime/time-value-steps.md), [jQuery](https://demo.mobiscroll.com/jquery/datetime/time-value-steps.md), [React](https://demo.mobiscroll.com/react/datetime/time-value-steps.md), [Vue](https://demo.mobiscroll.com/vue/datetime/time-value-steps.md)

## Description

Adjust the gaps between the time picker values as needed. Use these three options for setting the steps:

- `stepHour` - adjusts the gaps between the values for the time wheel
- `stepMinute` - adjusts the gaps between the values for the minute wheel
- `stepSecond` - adjusts the gaps between the values for the second wheel

## What this demo shows

- Four wheel-style date and time picker configurations for selecting a single date and time or a time value with different step intervals.
- **Date and time picker** The first example uses separate scrollable wheels for the date, hour, minute, and AM/PM. Minute values appear at 15-minute intervals. The current date is labeled `Today`, other dates use an abbreviated weekday, month, and date format.
- **Time picker with 5-minute steps** The second example uses separate scrollable wheels for the hour, minute, and AM/PM. Minute values appear at 5-minute intervals.
- **Time picker with 2-hour steps** The third example uses separate scrollable wheels for the hour, minute, and AM/PM. Hour values appear at 2-hour intervals.
- **Time picker with 30-second steps** The fourth example uses separate scrollable wheels for the hour, minute, and second. Second values appear at 30-second intervals.
- **Input behavior** Each picker opens at the bottom of the container over a darkened backdrop. Clicking outside the picker closes it.
- **Scrolling behavior** The selected values appear in a central selection area, while neighboring values are visually subdued. Users scroll vertically through each wheel to change the selection.
- **Footer actions** In the input-based examples, `Cancel` discards the changes and `Set` confirms the selected values.
- **Input value** After the user selects `Set`, the input displays the confirmed value in the format configured for that example.

## Best for

- **15-minute appointments** Booking interfaces for consultations, classes, or services that begin at quarter-hour intervals.
- **5-minute scheduling** Selecting precise start times for short appointments, transport departures, or other activities organized in 5-minute increments.
- **2-hour time blocks** Planning shifts, equipment reservations, or activities scheduled in larger blocks.
- **30-second precision** Selecting time values for short-duration processes, exercise intervals, or timed operational tasks that require half-minute increments.

## Tutorial

```html
<mbsc-datepicker
    [controls]="['datetime']"
    [stepMinute]="15"
    [touchUi]="true">
</mbsc-datepicker>
```

```html
<mbsc-datepicker
    [controls]="['time']"
    [stepMinute]="5"
    [touchUi]="true">
</mbsc-datepicker>
```

```html
<mbsc-datepicker
    [controls]="['time']"
    [stepHour]="2"
    [touchUi]="true">
</mbsc-datepicker>
```

```html
<mbsc-datepicker
    [controls]="['time']"
    [stepSecond]="30"
    [touchUi]="true">
</mbsc-datepicker>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/angular/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/angular/datepicker/api#opt-controls) - option
- [`stepMinute`](https://mobiscroll.com/docs/angular/datepicker/api#opt-stepMinute) - option
- [`inputStyle`](https://mobiscroll.com/docs/angular/datepicker/api#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/angular/datepicker/api#opt-labelStyle) - option
- [`stepHour`](https://mobiscroll.com/docs/angular/datepicker/api#opt-stepHour) - option
- [`stepSecond`](https://mobiscroll.com/docs/angular/datepicker/api#opt-stepSecond) - option
- [`timeFormat`](https://mobiscroll.com/docs/angular/datepicker/api#localization-timeFormat) - option

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, setOptions } from '@mobiscroll/angular';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {}
```

### Template

```html
<mbsc-page>
  <mbsc-datepicker
    [controls]="['datetime']"
    [stepMinute]="15"
    label="Date & Time (every 15 min)"
    inputStyle="outline"
    labelStyle="stacked"
    placeholder="Please Select..."
  ></mbsc-datepicker>
  <mbsc-datepicker
    [controls]="['time']"
    [stepMinute]="5"
    label="Time (every 5 min)"
    inputStyle="outline"
    labelStyle="stacked"
    placeholder="Please Select..."
  ></mbsc-datepicker>
  <mbsc-datepicker
    [controls]="['time']"
    [stepHour]="2"
    label="Time (every 2 hours)"
    inputStyle="outline"
    labelStyle="stacked"
    placeholder="Please Select..."
  ></mbsc-datepicker>
  <mbsc-datepicker
    [controls]="['time']"
    [stepSecond]="30"
    timeFormat="HH:mm:ss"
    label="Time (every 30 seconds)"
    inputStyle="outline"
    labelStyle="stacked"
    placeholder="Please Select..."
  ></mbsc-datepicker>
</mbsc-page>
```

## Implementation notes

- Four separate input-bound picker instances, each with a fixed step configuration - there is no live switcher in this demo; each variant is a distinct static instance.
- **Date and time, 15-minute steps**: `controls: ['datetime'], stepMinute: 15` - combines the date wheel with hour/minute/AM-PM wheels, restricting the minute wheel to quarter-hour values.
- **Time, 5-minute steps**: `controls: ['time'], stepMinute: 5` - restricts the minute wheel to 5-minute increments.
- **Time, 2-hour steps**: `controls: ['time'], stepHour: 2` - restricts the hour wheel to 2-hour increments.
- **Time, 30-second steps**: `controls: ['time'], stepSecond: 30, timeFormat: 'HH:mm:ss'` - adds a second wheel (via the `HH:mm:ss` format) restricted to 30-second increments.
- Each instance is bound to a Mobiscroll-generated input (`mbsc-input`, `data-input-style="outline"`, `data-label-style="stacked"`) rather than rendered inline.
- `stepHour`, `stepMinute`, and `stepSecond` are independent options - a given instance sets only the step(s) relevant to the wheels it renders; unset step options default to 1.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-angular.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config angular
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation

## Related demos

- Previous: [Date & time selection](https://demo.mobiscroll.com/angular/datetime/date-time-picker.md) - Angular Datetime scroller demo with date, hour and minute wheels. Featuring iPhone style rendering and format. With source code.