DatePicker

Examples

• Select a date with a calendar

  Description

  Enable date selection using an intuitive calendar interface. This example demonstrates a DatePicker that displays dates in a monthly calendar view, making it easier for merchants to select dates in context and visualize date relationships, ideal for scheduling or date range selection.

  React

  import React, {useState} from 'react';
  import {
    Button,
    DatePicker,
    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);
          }}
        />
        <DatePicker
          visibleState={visibleState}
          onChange={(selected) => {
            setDate(
              new Date(selected).toDateString(),
            );
          }}
          selected={date}
          inputMode={'spinner'}
        />
      </Screen>
    );
  };
  
  export default reactExtension(
    'pos.home.modal.render',
    () => <SmartGridModal />,
  );
  

  TS

  import {
    Button,
    DatePicker,
    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: () => {
          datePicker.updateProps({
            visibleState: [true, () => {}],
          });
        },
      });
  
      const handleOnChange = (selected) => {
        datePicker.updateProps({
          selected: new Date(
            selected,
          ).toDateString(),
        });
      };
  
      const datePicker = root.createComponent(
        DatePicker,
        {
          visibleState: [false, () => {}],
          onChange: handleOnChange,
          selected: new Date().toDateString(),
          inputMode: 'spinner',
        },
      );
  
      mainScreen.append(button);
      mainScreen.append(datePicker);
      root.append(mainScreen);
    },
  );