Date
component
A component that enables users to open a dialog and select a date through a text input.
Anchor to datefieldDateField
Anchor to label
label
string
required
The content to use as the field label.
Anchor to action
action
A button under the text field to provide extra functionality.
Anchor to disabled
disabled
boolean
Whether the field can be modified.
Anchor to error
error
string
Indicates an error to the user. The field is given specific stylistic treatment to communicate problems that have to be resolved immediately.
Anchor to helpText
helpText
string
The label under the text field which provides guidance or instructions that assist users.
Anchor to onBlur
onBlur
() => void
The callback when focus is removed.
Anchor to onChange
onChange
(value: string) => void
The callback when the user has finished editing a field.
Anchor to onFocus
onFocus
() => void
The callback when input is focused.
Anchor to value
value
string
The current value for the field. Defaults to now. You should update this value in response to the callback.
Was this section helpful?
Date input
import React, {useState} from 'react';
import {
DateField,
Screen,
ScrollView,
Navigator,
Text,
reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';
const SmartGridModal = () => {
const [date, setDate] = useState('');
return (
<Navigator>
<Screen name="DateField" title="DateField Example">
<ScrollView>
<DateField
label="Date"
value={date}
onChange={setDate}
action={{
label: 'Clear',
onPress: () => setDate(''),
}}
/>
<Text>Selected Date: {date}</Text>
</ScrollView>
</Screen>
</Navigator>
);
};
export default reactExtension('pos.home.modal.render', () => (
<SmartGridModal />
));
Preview
Anchor to guidelinesGuidelines
- Use a smart default date for common selections.
Was this section helpful?