replaced react-datetime with @material-ui/pickers issue bench-routes#34

package.json

@@ -5,9 +5,12 @@
   "dependencies": {
     "@chakra-ui/icons": "^1.0.13",
     "@chakra-ui/react": "^1.0.0",
+    "@date-io/date-fns": "^1.3.13",
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "@faker-js/faker": "^5.5.3",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/pickers": "^3.3.10",
     "@testing-library/jest-dom": "^5.9.0",
     "@testing-library/react": "^10.2.1",
     "@testing-library/user-event": "^12.0.2",
@@ -18,12 +21,11 @@
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.3",
     "axios": "^0.21.1",
+    "date-fns": "^2.28.0",
     "dayjs": "^1.10.7",
     "framer-motion": "^4.0.0",
-    "moment": "^2.29.1",
     "puppeteer": "^10.1.0",
     "react": "^17.0.2",
-    "react-datetime": "^3.0.4",
     "react-dayjs-picker": "^1.3.0",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",

src/components/TimeQuerier/index.tsx

@@ -13,10 +13,14 @@ import {
   Alert,
   AlertIcon,
 } from "@chakra-ui/react";
-import Datetime from "react-datetime";
 import constants from "../../utils/constants";
 import { useTimeQuerierStore } from "../../store/timeQuerier";
 import dayjs from "dayjs";
+import DateFnsUtils from "@date-io/date-fns";
+import {
+  MuiPickersUtilsProvider,
+  KeyboardDatePicker,
+} from "@material-ui/pickers";
 
 const TimeQuerier: React.FC = () => {
   const styles = useStyleConfig("DateTime", {});
@@ -77,14 +81,21 @@ const TimeQuerier: React.FC = () => {
       >
         <Text>Start Time</Text>
         <Box sx={styles}>
-          <Datetime
-            value={startTime}
-            dateFormat={dateFormat}
-            timeFormat={timeFormat}
-            inputProps={{ className: "custom-datepicker start-time" }}
-            onChange={handleStartChange}
-            isValidDate={valid}
-          />
+          <MuiPickersUtilsProvider utils={DateFnsUtils}>
+            <KeyboardDatePicker
+              disableToolbar
+              variant="inline"
+              format="MM/dd/yyyy"
+              margin="normal"
+              id="date-picker-inline"
+              value={startTime}
+              isValidDate={valid}
+              onChange={handleStartChange}
+              KeyboardButtonProps={{
+                "aria-label": "change date",
+              }}
+            />
+          </MuiPickersUtilsProvider>
         </Box>
       </Box>
       <Box
@@ -96,14 +107,21 @@ const TimeQuerier: React.FC = () => {
       >
         <Text>End Time</Text>
         <Box sx={styles}>
-          <Datetime
-            value={endTime}
-            dateFormat={dateFormat}
-            timeFormat={timeFormat}
-            inputProps={{ className: "custom-datepicker end-time" }}
-            onChange={handleEndChange}
-            isValidDate={valid}
-          />
+          <MuiPickersUtilsProvider utils={DateFnsUtils}>
+            <KeyboardDatePicker
+              disableToolbar
+              variant="inline"
+              format="MM/dd/yyyy"
+              margin="normal"
+              id="date-picker-inline"
+              value={endTime}
+              isValidDate={valid}
+              onChange={handleEndChange}
+              KeyboardButtonProps={{
+                "aria-label": "change date",
+              }}
+            />
+          </MuiPickersUtilsProvider>
         </Box>
       </Box>
       <Box

src/theme/index.ts

@@ -9,7 +9,6 @@ import { Heading } from "./components/Heading";
 import { extendTheme } from "@chakra-ui/react";
 // Global style overrides
 import styles from "./global";
-import "react-datetime/css/react-datetime.css";
 //Branding style ovverides
 import branding from "./branding";