Time
component
A component used to select a time through a dialog.
Anchor to timepickerTimePicker
- Anchor to visibleStatevisibleState[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 selectedselectedstringDefault: The current time
The selected time.
- Anchor to onChangeonChange(selected: string) => void
A callback for changes.
- Anchor to is24Houris24HourbooleanDefault: false
(Android only) Whether the clock displays in 24 hour time instead of 12 hour time.
- Anchor to inputModeinputMode"inline" | "spinner"Default: 'inline'
Whether to display the picker in inline (clock) mode or spinner mode. iOS only supports 'spinner'.
TimePickerProps
Represents the properties for the TimePicker component.
- selected
The selected time.
string - onChange
A callback for changes.
(selected: string) => void - visibleState
Controls the visible state, and a callback to set the visible state as false when the dialog closes.
[boolean, (visible: boolean) => void] - is24Hour
(Android only) Whether the clock displays in 24 hour time instead of 12 hour time.
boolean - inputMode
Whether to display the picker in inline (clock) mode or spinner mode. iOS only supports 'spinner'.
"inline" | "spinner"
export interface TimePickerProps {
/**
* The selected time.
* @defaultValue The current time
*/
selected?: string;
/**
* A callback for changes.
*/
onChange?(selected: string): void;
/**
* Controls the visible state, and a callback to set the visible state as false when the dialog closes.
*/
visibleState: [boolean, (visible: boolean) => void];
/**
* (Android only) Whether the clock displays in 24 hour time instead of 12 hour time.
* @defaultValue false
*/
is24Hour?: boolean;
/**
* Whether to display the picker in inline (clock) mode or spinner mode.
* iOS only supports 'spinner'.
* @defaultValue 'inline'
*/
inputMode?: 'inline' | 'spinner';
}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 />,
);
examples
TimePicker
React
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 />, );TS
import { Button, TimePicker, Screen, extension, } from '@shopify/ui-extensions/point-of-sale'; export default extension( 'pos.home.modal.render', (root) => { const mainScreen = root.createComponent( Screen, { name: 'Home', title: 'Home', }, ); const button = root.createComponent(Button, { title: 'Show', onPress: () => { timePicker.updateProps({ visibleState: [true, () => {}], }); }, }); const handleOnChange = (selected) => { timePicker.updateProps({ selected: new Date( selected, ).toDateString(), }); }; const timePicker = root.createComponent( TimePicker, { visibleState: [false, () => {}], onChange: handleOnChange, selected: new Date().toDateString(), is24Hour: true, inputMode: 'spinner', }, ); mainScreen.append(button); mainScreen.append(timePicker); root.append(mainScreen); }, );
Preview
