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
<Datepicker
controls={['datetime']}
stepMinute={15}
touchUi=
/>
<Datepicker
controls={['time']}
stepMinute={5}
touchUi=
/>
<Datepicker
controls={['time']}
stepHour={2}
touchUi=
/>
<Datepicker
controls={['time']}
stepSecond={30}
touchUi=
/>
JSXTSX
import { Datepicker, Page, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<Page>
<Datepicker
controls={['datetime']}
stepMinute={15}
label="Date & Time (every 15 min)"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
<Datepicker
controls={['time']}
stepMinute={5}
label="Time (every 5 min)"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
<Datepicker
controls={['time']}
stepHour={2}
label="Time (every 2 hours)"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
<Datepicker
controls={['time']}
stepSecond={30}
timeFormat="HH:mm:ss"
label="Time (every 30 seconds)"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
</Page>
);
}
export default App;
import { Datepicker, Page, setOptions } from '@mobiscroll/react';
import { FC } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => (
<Page>
<Datepicker
controls={['datetime']}
stepMinute={15}
label="Date & Time (every 15 min)"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
<Datepicker
controls={['time']}
stepMinute={5}
label="Time (every 5 min)"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
<Datepicker
controls={['time']}
stepHour={2}
label="Time (every 2 hours)"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
<Datepicker
controls={['time']}
stepSecond={30}
timeFormat="HH:mm:ss"
label="Time (every 30 seconds)"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
/>
</Page>
);
export default App;