On normal resolutions, the DatePicker does not appear — it only becomes visible when the page is zoomed out as much as possible.
I’m not sure when this started happening, but it was working before. Previously, there was another issue where the picker rendered in the wrong position. There is already a confirmed issue that describes this problem well, but no ETA has been provided for a fix.
Here is a sample code, which perfectly resembles the one provided in the docs:
import React, {useState} from 'react';
import {
reactExtension,
AdminBlock,
BlockStack,
DateField
} from '@shopify/ui-extensions-react/admin';
// The target used here must match the target used in the extension's toml file (./shopify.extension.toml)
const TARGET = 'admin.product-details.block.render';
export default reactExtension(TARGET, () => <App />);
function App() {
// The useApi hook provides access to several useful APIs like i18n and data.
const [value, setValue] = useState('2023-11-08');
return (
// The AdminBlock component provides an API for setting the title of the Block extension wrapper.
<AdminBlock title="My Block Extension">
<BlockStack>
<DateField label="DateField" value={value} onChange={setValue} />
</BlockStack>
</AdminBlock>
);
}
