Update new date field value format and added value preview (#2682)

Update new date field value format and added value preview


![image](https://github.com/zesty-io/manager-ui/assets/28705606/7afd5cc6-4bd0-4261-b810-9d3c681e04b0)

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

@@ -889,32 +889,20 @@ export const Field = ({
       );
 
     case "date":
-      /**
-       * Every time this parent compenent re-renders it creates a new function
-       * invalidating the FieldTypeData components referential prop check,
-       * causing it to re-render as well. This `onChange` handler doesn't need
-       * to change once created.
-       */
-      const onDateChange = useCallback(
-        (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
-           * this ensures that behavior is maintained.
-           */
-          onChange(value, name, datatype);
-        },
-        [onChange]
-      );
-
       return (
         <FieldShell settings={fieldData} errors={errors}>
           <FieldTypeDate
             name={name}
             required={required}
             value={value ? moment(value).toDate() : null}
             // format="MMM dd, yyyy"
-            onChange={(date) => onDateChange(date, name, datatype)}
+            onChange={(date) => {
+              onChange(
+                date ? moment(date).format("yyyy-MM-DD") : null,
+                name,
+                datatype
+              );
+            }}
             error={errors && Object.values(errors)?.some((error) => !!error)}
           />
         </FieldShell>

src/shell/components/FieldTypeDate/index.tsx

@@ -9,6 +9,7 @@ import Button from "@mui/material/Button";
 import { Typography, Stack, Box, TextField } from "@mui/material";
 import format from "date-fns/format";
 import CalendarTodayRoundedIcon from "@mui/icons-material/CalendarTodayRounded";
+import moment from "moment";
 
 export interface FieldTypeDateProps extends DatePickerProps<Date> {
   name: string;
@@ -18,6 +19,7 @@ export interface FieldTypeDateProps extends DatePickerProps<Date> {
     timePicker?: React.ReactNode;
   };
   onClear?: () => void;
+  valueFormatPreview?: string;
 }
 
 const parseDateInput = (input: string): Date | null => {
@@ -56,7 +58,14 @@ const parseDateInput = (input: string): Date | null => {
 };
 
 export const FieldTypeDate = memo(
-  ({ required, error, slots, onClear, ...props }: FieldTypeDateProps) => {
+  ({
+    required,
+    error,
+    slots,
+    onClear,
+    valueFormatPreview,
+    ...props
+  }: FieldTypeDateProps) => {
     const textFieldRef = useRef<HTMLInputElement>(null);
     const [isOpen, setIsOpen] = useState(false);
 
@@ -195,6 +204,12 @@ export const FieldTypeDate = memo(
             Clear
           </Button>
         </Stack>
+        {(valueFormatPreview || props.value) && (
+          <Typography variant="body3" color="text.secondary" sx={{ mt: 0.5 }}>
+            Stored as{" "}
+            {valueFormatPreview ?? moment(props.value).format("yyyy-MM-DD")}
+          </Typography>
+        )}
       </LocalizationProvider>
     );
   }

src/shell/components/FieldTypeDateTime/index.tsx

@@ -79,6 +79,9 @@ export const FieldTypeDateTime = ({
         name={name}
         required={required}
         value={dateString ? moment(dateString).toDate() : null}
+        valueFormatPreview={
+          dateString && timeString ? `${dateString} ${timeString}` : null
+        }
         onChange={(date) => {
           if (date) {
             onChange(
@@ -222,11 +225,6 @@ export const FieldTypeDateTime = ({
           ),
         }}
       />
-      {dateString && timeString && (
-        <Typography variant="body3" color="text.secondary" sx={{ mt: 0.5 }}>
-          Stored as {dateString} {timeString}
-        </Typography>
-      )}
     </>
   );
 };