Demo Admin: Implement DateTime field in handmade product form (#2639)

DateTime fields will be needed for the admin form generator. This is the demo to preface that.

An example use case is: Save start and end time of events.

demo/admin/src/products/ProductForm.gql.ts

@@ -37,6 +37,7 @@ export const productFormFragment = gql`
             min
             max
         }
+        lastCheckedAt
         dimensions {
             width
             height

demo/admin/src/products/ProductForm.tsx

@@ -15,7 +15,7 @@ import {
     useFormApiRef,
     useStackSwitchApi,
 } from "@comet/admin";
-import { DateField } from "@comet/admin-date-time";
+import { DateField, DateTimeField } from "@comet/admin-date-time";
 import { BlockState, createFinalFormBlock } from "@comet/blocks-admin";
 import {
     DamImageBlock,
@@ -111,6 +111,7 @@ export function ProductForm({ id, width }: FormProps) {
                       id: filteredData.manufacturerCountry?.addressAsEmbeddable.country,
                   }
                 : undefined,
+            lastCheckedAt: filteredData.lastCheckedAt ? new Date(filteredData.lastCheckedAt) : null,
         };
     }, [data, width]);
 
@@ -140,6 +141,7 @@ export function ProductForm({ id, width }: FormProps) {
             priceList: formValues.priceList ? formValues.priceList.id : null,
             datasheets: formValues.datasheets?.map(({ id }) => id),
             manufacturer: formValues.manufacturer?.id,
+            lastCheckedAt: formValues.lastCheckedAt ? formValues.lastCheckedAt.toISOString() : null,
         };
 
         if (mode === "edit") {
@@ -357,6 +359,11 @@ export function ProductForm({ id, width }: FormProps) {
                         fullWidth
                         layout="grid"
                     />
+                    <DateTimeField
+                        label={<FormattedMessage id="product.lastCheckedAt" defaultMessage="Last checked at" />}
+                        name="lastCheckedAt"
+                        fullWidth
+                    />
                 </>
             )}
         </FinalForm>