Date field revamp

src/apps/content-editor/src/app/components/Editor/Field/Field.tsx

@@ -900,6 +900,7 @@ export const Field = ({
        */
       const onDateChange = useCallback(
         (value, name, datatype) => {
+          console.log(value, name, datatype);
           /**
            * Flatpickr emits a utc timestamp, offset from users local time.
            * Legacy behavior did not send utc but sent the value as is selected by the user
@@ -910,23 +911,41 @@ export const Field = ({
         [onChange]
       );
 
+      // return (
+      //   <FieldShell settings={fieldData} errors={errors}>
+      //     <Box maxWidth={360}>
+      //       <FieldTypeDate
+      //         name={name}
+      //         required={required}
+      //         // use moment to create a UTC date object
+      //         value={
+      //           value
+      //             ? new Date(moment(value).format("YYYY-MM-DD HH:mm:ss"))
+      //             : null
+      //         }
+      //         inputFormat="MM-dd-yyyy"
+      //         onChange={(date) => onDateChange(date, name, datatype)}
+      //         error={errors && Object.values(errors)?.some((error) => !!error)}
+      //       />
+      //     </Box>
+      //   </FieldShell>
+      // );
+
       return (
         <FieldShell settings={fieldData} errors={errors}>
-          <Box maxWidth={360}>
-            <FieldTypeDate
-              name={name}
-              required={required}
-              // use moment to create a UTC date object
-              value={
-                value
-                  ? new Date(moment(value).format("YYYY-MM-DD HH:mm:ss"))
-                  : null
-              }
-              inputFormat="yyyy-MM-dd"
-              onChange={(date) => onDateChange(date, name, datatype)}
-              error={errors && Object.values(errors)?.some((error) => !!error)}
-            />
-          </Box>
+          <FieldTypeDate
+            name={name}
+            required={required}
+            // use moment to create a UTC date object
+            value={
+              value
+                ? new Date(moment(value).format("YYYY-MM-DD HH:mm:ss"))
+                : null
+            }
+            format="MMM dd, yyyy"
+            onChange={(date) => onDateChange(date, name, datatype)}
+            error={errors && Object.values(errors)?.some((error) => !!error)}
+          />
         </FieldShell>
       );
 

src/shell/components/FieldTypeDate/index.tsx

@@ -1,10 +1,14 @@
-import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import { DesktopDatePicker, DesktopDatePickerProps } from "@mui/x-date-pickers";
-import { TextField } from "@mui/material";
+import {
+  DatePicker,
+  LocalizationProvider,
+  DatePickerProps,
+} from "@mui/x-date-pickers-pro";
+import { AdapterDateFns } from "@mui/x-date-pickers-pro/AdapterDateFns";
+import { useEffect, useState } from "react";
+import Button from "@mui/material/Button";
+import { Typography, Stack, Box } from "@mui/material";
 
-export interface FieldTypeDateProps
-  extends Omit<DesktopDatePickerProps<Date, Date>, "renderInput"> {
+export interface FieldTypeDateProps extends DatePickerProps<Date> {
   name: string;
   required?: boolean;
   error?: boolean;
@@ -13,18 +17,94 @@ export interface FieldTypeDateProps
 export const FieldTypeDate = ({
   required,
   error,
+  value,
   ...props
 }: FieldTypeDateProps) => {
+  const [dateValue, setValue] = useState<Date | null>(null);
+
+  useEffect(() => {
+    setValue(value);
+  }, [value]);
+
   return (
     <LocalizationProvider dateAdapter={AdapterDateFns}>
-      <DesktopDatePicker
-        data-testid="zds-date-picker"
-        renderInput={(params) => (
-          <TextField {...params} fullWidth size="small" error={error} />
-        )}
-        // Spread props at the end to allow prop overrides
-        {...props}
-      />
+      <Stack direction={"row"}>
+        <Box maxWidth={160}>
+          <DatePicker
+            value={dateValue}
+            {...props}
+            disableHighlightToday={!!value}
+            slotProps={{
+              day: {
+                // sx: {
+                //   "&.MuiPickersDay-today": {
+                //     background: "#FF5D0A",
+                //     border: "none",
+                //     color: "white",
+                //   },
+                // },
+              },
+              textField: {
+                placeholder: "Mon DD YYYY",
+              },
+              inputAdornment: {
+                position: "start",
+              },
+            }}
+          />
+        </Box>
+
+        <Button
+          sx={{
+            "&:hover": {
+              background: "transparent",
+            },
+            minWidth: 54,
+          }}
+          variant="text"
+          size="small"
+          disableRipple
+          onClick={() => {
+            setValue(null);
+          }}
+        >
+          <Typography
+            color={"text.secondary"}
+            fontWeight={500}
+            variant="caption"
+          >
+            Clear
+          </Typography>
+        </Button>
+      </Stack>
     </LocalizationProvider>
   );
 };
+
+// export interface FieldTypeDateProps
+//   extends Omit<DesktopDatePickerProps<Date, Date>, "renderInput"> {
+//   name: string;
+//   required?: boolean;
+//   error?: boolean;
+// }
+
+// export const FieldTypeDate = ({
+//   required,
+//   error,
+//   ...props
+// }: FieldTypeDateProps) => {
+//   return (
+//     <LocalizationProvider dateAdapter={AdapterDateFns}>
+//       <DesktopDatePicker
+//         InputAdornmentProps={{ position: "start" }}
+//         data-testid="zds-date-picker"
+//         renderInput={(params) => {
+//           params.inputProps.placeholder = "Mon DD YYYY";
+//           return <TextField {...params} fullWidth size="small" error={error} />;
+//         }}
+//         // Spread props at the end to allow prop overrides
+//         {...props}
+//       />
+//     </LocalizationProvider>
+//   );
+// };