DatePicker

• The DatePicker component is designed to facilitate the selection of dates within React Native applications, providing a seamless integration for both Android and iOS platforms. It utilizes the platform-specific capabilities to offer a native date picking experience, ensuring that the component behaves intuitively according to the user's device.

  On iOS, the DatePicker is presented within a modal with customizable header text, and on Android, it leverages the native date picker dialog. This component is ideal for scenarios requiring users to input dates, such as selecting birthdays, reservations, or any date-related information.

• 
  

  <DatePicker
    value={new Date()}
    isOpen={true}
    onValueChange={(date) => console.log(date)}
    onDismiss={() => console.log("Picker Closed")}
    iosHeaderText="Select Your Date"
  />

Integration

Requirements:

• Ensure your project environment is set up with access to @shopify/shop-minis-platform-sdk. See the quickstart for requirements and to set up a Shop Mini.

Step 1: Importing the Component

To utilize the DatePicker, start by importing it at the top of your component file:

import { DatePicker } from '@shopify/shop-minis-platform-sdk';

Step 2: Using the DatePicker Component

Include the DatePicker into your component setup, ensuring to manage its visibility and handle value changes properly:

const [date, setDate] = useState(new Date());
const [isOpen, setIsOpen] = useState(false);

const handleDateChange = (newDate) => {
  setDate(newDate);
  setIsOpen(false); // Close picker after selection
};

<DatePicker
  value={date}
  isOpen={isOpen}
  onValueChange={handleDateChange}
  onDismiss={() => setIsOpen(false)}
  iosHeaderText="Choose a Date"
/>

Examples

Basic Usage:

<DatePicker
  value={new Date()}
  isOpen={true}
  onValueChange={(date) => console.log(date)}
  onDismiss={() => console.log("Picker Closed")}
/>

With Custom Header Text on iOS:

<DatePicker
  value={new Date()}
  isOpen={true}
  onValueChange={(date) => console.log(date)}
  onDismiss={() => console.log("Picker Closed")}
  iosHeaderText="Set Your Appointment Date"
/>

The DatePicker component enhances user experience by providing an intuitive and easy-to-use interface for date selection, aligned with native look and feel. By following these integration steps and examples, developers can swiftly incorporate date picking functionality in their apps, ensuring robustness and user satisfaction.

Additional Components

• Modal: Utilized on iOS to wrap the DateTimePicker inside a modal dialog.
• Button: Used within the modal to provide actions like confirming the date selection.

Props

• value (Date): The currently selected date.
• onValueChange ((date?: Date) => void): Callback function triggered when the date changes.
• isOpen (boolean): Controls the visibility of the DatePicker.
• onDismiss (() => void): Function to call when closing the DatePicker.
• iosHeaderText (string optional): Text to display as the header on iOS devices.
• iosProps (IOSNativeProps optional): Additional properties for customizing the iOS DatePicker.
• androidProps (AndroidNativeProps optional): Additional properties for customizing the Android DatePicker.

For more details on the props, please refer to the DatePicker Props.