Time
component
A component used to select a time through a dialog.
Anchor to timepickerTimePicker
Anchor to visibleState
visibleState
[boolean, (visible: boolean) => void]
required
Controls the visible state, and a callback to set the visible state as false when the dialog closes.
Anchor to inputMode
inputMode
'inline' | 'spinner'
Default: 'inline'
Whether to display the picker in inline (clock) mode or spinner mode. iOS only supports 'spinner'.
Anchor to is24Hour
is24Hour
boolean
Default: false
(Android only) Whether the clock displays in 24 hour time instead of 12 hour time.
Anchor to onChange
onChange
(selected: string) => void
A callback for changes.
Anchor to selected
selected
string
Default: The current time
The selected time.
Was this section helpful?
TimePicker
import React, {useState} from 'react';
import {
Button,
TimePicker,
Screen,
Text,
reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';
const SmartGridModal = () => {
const [date, setDate] = useState(
new Date().toDateString(),
);
const visibleState = useState(false);
return (
<Screen name="Home" title="Home">
<Text>Selected date: {date}</Text>
<Button
title="Show"
onPress={() => {
visibleState[1](true);
}}
/>
<TimePicker
visibleState={visibleState}
onChange={(selected) => {
setDate(
new Date(selected).toDateString(),
);
}}
selected={date}
is24Hour={true}
inputMode={'spinner'}
/>
</Screen>
);
};
export default reactExtension(
'pos.home.modal.render',
() => <SmartGridModal />,
);
Preview
