TimeField

Examples

• Capture time input with format validation

  Description

  Collect time information with built-in validation and format support. This example demonstrates a TimeField that handles both 12-hour and 24-hour formats based on locale, providing time picker integration and formatted display for scheduling and booking workflows.

  React

  import React, {useState} from 'react';
  import {
    TimeField,
    Screen,
    ScrollView,
    Navigator,
    Text,
    reactExtension,
  } from '@shopify/ui-extensions-react/point-of-sale';
  
  const SmartGridModal = () => {
    const [time, setTime] = useState('');
    return (
      <Navigator>
        <Screen name="TimeField" title="TimeField Example">
          <ScrollView>
            <TimeField label="Time" value={time} onChange={setTime} />
            <Text>Selected Time: {time}</Text>
          </ScrollView>
        </Screen>
      </Navigator>
    );
  };
  
  export default reactExtension('pos.home.modal.render', () => (
    <SmartGridModal />
  ));
  

  TS

  import {
    Navigator,
    Screen,
    ScrollView,
    Text,
    TimeField,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';
  
  export default extension('pos.home.modal.render', (root, api) => {
    const timeField = root.createComponent(TimeField, {
      label: 'Select Time',
      value: '',
    });
  
    const textBox = root.createComponent(Text);
  
    const onChangeHandler = (newValue: string) => {
      timeField.updateProps({value: newValue});
  
      const textContent = `Selected Time: ${newValue}`;
      textBox.replaceChildren(textContent);
    };
  
    timeField.updateProps({onChange: onChangeHandler});
  
    const scrollView = root.createComponent(ScrollView);
    scrollView.append(timeField);
    scrollView.append(textBox);
  
    const screen = root.createComponent(Screen, {
      name: 'TimeField',
      title: 'Time Field Example',
    });
    screen.append(scrollView);
  
    const navigator = root.createComponent(Navigator);
    navigator.append(screen);
  
    root.append(navigator);
  });