update dateTimeField component to use utc adapter.

Author: mcmcphillips

react/components/DateTimeField/DateTimeField.jsx

@@ -1,76 +1,85 @@
 import React from "react";
 import PropTypes from "prop-types";
-import InputLabel from "../InputLabel";
+import { InputLabel } from "@madie/madie-design-system/dist/react";
 import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+
 import { FormControl } from "@mui/material";
 import { kebabCase } from "lodash";
 
+dayjs.extend(utc);
 export const dateTimeTextFieldStyle = {
-    width: "240px",
+  width: "240px",
+  borderRadius: "3px",
+  height: 40,
+  border: "1px solid #B0B0B0",
+  marginTop: "8px",
+  "& .MuiOutlinedInput-notchedOutline": {
     borderRadius: "3px",
-    height: 40,
-    border: "1px solid #B0B0B0",
-    marginTop: "8px",
-    "& .MuiOutlinedInput-notchedOutline": {
-        borderRadius: "3px",
-        "& legend": {
-            width: 0,
-        },
+    "& legend": {
+      width: 0,
     },
-    "& .MuiOutlinedInput-root": {
-        "&&": {
-            borderRadius: "3px",
-        },
+  },
+  "& .MuiOutlinedInput-root": {
+    "&&": {
+      borderRadius: "3px",
     },
-    "& .MuiInputBase-input": {
-        color: "#333333",
-        fontFamily: "Rubik",
-        fontSize: 14,
-        borderRadius: "3px",
-        padding: "9px",
-        Width: "240px",
-        "&::placeholder": {
-            opacity: 1,
-            color: "#717171",
-            fontFamily: "Rubik",
-            fontSize: 14,
-        },
+  },
+  "& .MuiInputBase-input": {
+    color: "#333333",
+    fontFamily: "Rubik",
+    fontSize: 14,
+    borderRadius: "3px",
+    padding: "9px",
+    Width: "240px",
+    "&::placeholder": {
+      opacity: 1,
+      color: "#717171",
+      fontFamily: "Rubik",
+      fontSize: 14,
     },
+  },
 };
 
-const DateTimeField = ({ label, dateTimeValue, handleDateTimeChange,disabled }) => {
-    return (
-        <FormControl>
-            <LocalizationProvider dateAdapter={AdapterDayjs}>
-                <InputLabel
-                    style={{ marginBottom: 0, height: 16 }}
-                    data-testId={`${kebabCase(label)}`}
-                >
-                    {`${label}`}
-                </InputLabel>
-                <DateTimePicker
-                    value={dateTimeValue ? dateTimeValue : null}
-                    onChange={handleDateTimeChange}
-                    views={["year", "day", "hours", "minutes"]}
-                    disabled={disabled}
-                    slotProps={{
-                        textField: {
-                            id: "dateTime",
-                            sx: dateTimeTextFieldStyle,
-                        },
-                    }}
-                />
-            </LocalizationProvider>
-        </FormControl>
-    );
+const DateTimeField = ({
+  label,
+  dateTimeValue,
+  handleDateTimeChange,
+  disabled,
+}) => {
+  return (
+    <FormControl>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <InputLabel
+          style={{ marginBottom: 0, height: 16 }}
+          data-testId={`${kebabCase(label)}`}
+        >
+          {`${label}`}
+        </InputLabel>
+        <DateTimePicker
+          value={dateTimeValue ? dateTimeValue : null}
+          onChange={handleDateTimeChange}
+          views={["year", "day", "hours", "minutes"]}
+          disabled={disabled}
+          slotProps={{
+            textField: {
+              id: "dateTime",
+              sx: dateTimeTextFieldStyle,
+            },
+          }}
+        />
+      </LocalizationProvider>
+    </FormControl>
+  );
 };
 DateTimeField.propTypes = {
-    dateTimeValue: PropTypes.object,
-    handleDateTimeChange: PropTypes.func.isRequired,
-    label: PropTypes.string.isRequired,
-    disabled:PropTypes.bool
+  dateTimeValue: PropTypes.object,
+  handleDateTimeChange: PropTypes.func.isRequired,
+  label: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
 };
 
-export default DateTimeField;
+export default DateTimeField;