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
<MbscDatepicker
:controls="['datetime']"
:stepMinute="15"
:touchUi=" "
/>
<MbscDatepicker
:controls="['time']"
:stepMinute="5"
:touchUi=" "
/>
<MbscDatepicker
:controls="['time']"
:stepHour="2"
:touchUi=" "
/>
<MbscDatepicker
:controls="['time']"
:stepSecond="30"
:touchUi=" "
/>
SFC JSSFC TS
<script setup>
import { MbscDatepicker, MbscPage, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscPage>
<MbscDatepicker
:controls="['datetime']"
:stepMinute="15"
label="Date & Time (every 15 min)"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
<MbscDatepicker
:controls="['time']"
:stepMinute="5"
label="Time (every 5 min)"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
<MbscDatepicker
:controls="['time']"
:stepHour="2"
label="Time (every 2 hours)"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
<MbscDatepicker
:controls="['time']"
:stepSecond="30"
timeFormat="HH:mm:ss"
label="Time (every 30 seconds)"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
</MbscPage>
</template>
<script setup lang="ts">
import { MbscDatepicker, MbscPage, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscPage>
<MbscDatepicker
:controls="['datetime']"
:stepMinute="15"
label="Date & Time (every 15 min)"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
<MbscDatepicker
:controls="['time']"
:stepMinute="5"
label="Time (every 5 min)"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
<MbscDatepicker
:controls="['time']"
:stepHour="2"
label="Time (every 2 hours)"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
<MbscDatepicker
:controls="['time']"
:stepSecond="30"
timeFormat="HH:mm:ss"
label="Time (every 30 seconds)"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
/>
</MbscPage>
</template>