Setting time select steps
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 wheelstepMinute- adjusts the gaps between the values for the minute wheelstepSecond- adjusts the gaps between the values for the second wheel
Demo
<mbsc-datepicker
[controls]="['datetime']"
[stepMinute]="15"
[ touchUi] ="<mbsc-datepicker
[controls]="['time']"
[stepMinute]="5"
[ touchUi] ="<mbsc-datepicker
[controls]="['time']"
[stepHour]="2"
[ touchUi] ="<mbsc-datepicker
[controls]="['time']"
[stepSecond]="30"
[ touchUi] ="ComponentTemplate
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {}
<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>