Date
component
A component used to select a date through a dialog.
Anchor to datepickerDatePicker
Anchor to visibleState
visibleState
[boolean, (visible: boolean) => void]
required
Control the visible state, and a callback to set the visible state as false when the dialog closes.
Anchor to inputMode
inputMode
'inline' | 'spinner'
Default: 'inline'
Whether to display the picker in inline (calendar) mode or spinner mode.
Anchor to onChange
onChange
(selected: string) => void
A callback for changes.
Anchor to selected
selected
string
Default: The current time
The selected time.
Was this section helpful?
DatePicker
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 />,
);
Preview
