TimePicker

Anchor to PropertiesProperties

Anchor to ExamplesExamples

Anchor to Select time with a pickerSelect time with a picker

Enable time selection using an interactive picker interface. This example demonstrates a TimePicker that provides a visual, touch-friendly way to select hours and minutes, making time selection faster and more accurate than text-based input for scheduling workflows.

Select time with a picker

Select time with a picker

ReactTS

Copy

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

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 />,

);

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

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);

},

);

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);
  },
);

Anchor to Best practicesBest practices

• Choose appropriate input modes for your platform: Use 'inline' mode (clock) on Android when users benefit from seeing a clock interface. iOS only supports 'spinner' mode, so design your time selection experience to work well with spinners across all platforms.
• Configure time format for Android users: Use the is24Hour property to control whether Android devices display times in 24-hour or 12-hour format. Set this based on your target audience's preferences and regional conventions. This property only affects Android devices.
• Handle time selection with onChange: Implement the onChange callback to capture selected times and update your application state accordingly. This callback receives the selected time string that you can use to update UI or trigger related actions.
• Default to current time thoughtfully: The picker defaults to the current time when no selected value is provided. If you need a different starting time or want to guide users to a specific time period, explicitly set the selected property.
• Provide clear triggers for showing the picker: Since visibility is controlled by visibleState, ensure you have clear UI elements like buttons or field interactions that toggle the picker visibility. Users should understand how to open and close the time picker.

Anchor to LimitationsLimitations

• TimePicker requires external visibility state management through the visibleState tuple—automatic show/hide behavior based on field focus is not built-in.
• The inputMode property has platform limitations—iOS only supports spinner mode regardless of the inputMode setting, which may affect cross-platform consistency.
• The is24Hour property only affects Android devices—iOS and other platforms use their system-level time format preferences regardless of this setting.
• The component provides time selection but doesn't include field labels, help text, or error messaging—combine with other UI elements or text components to provide complete form field experiences.