# TimePicker

A component used to select a time through a dialog.

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

```

## TimePicker

### TimePickerProps

Represents the properties for the TimePicker component.

### inputMode

value: `'inline' | 'spinner'`

Whether to display the picker in inline (clock) mode or spinner mode. iOS only supports 'spinner'.

### is24Hour

value: `boolean`

(Android only) Whether the clock displays in 24 hour time instead of 12 hour time.

### onChange

value: `(selected: string) => void`

A callback for changes.

### selected

value: `string`

The selected time.

### visibleState

value: `[boolean, (visible: boolean) => void]`

Controls the visible state, and a callback to set the visible state as false when the dialog closes.