re-implement a way to select start and end day

src/common/time/TimeBar.tsx

@@ -3,6 +3,7 @@ import {
   DialogActions,
   DialogContent,
   Grid,
+  TextField,
   Theme,
   Typography
 } from "@mui/material";
@@ -13,6 +14,7 @@ import ResponsiveDialog from "common/ResponsiveDialog";
 import { DateRangePreset, GetDefaultDateRange, SetDefaultPreset } from "./DateRange";
 import { useThemeType } from "hooks";
 import { makeStyles } from "@mui/styles";
+import { cloneDeep } from "lodash";
 
 interface Props {
   startDate: Moment;
@@ -49,7 +51,7 @@ export default function TimeBar(props: Props) {
 
   const submitDateRange = () => {
     const startDate = dateRange[0] ? dateRange[0].clone() : moment();
-    const endDate = dateRange[1] ? dateRange[1].clone() : moment();
+    const endDate = dateRange[1] ? dateRange[1].add(1, "day").clone() : moment(); //add 1 day to the end time to include that day rather than have it be the cutoff
     updateDateRange(startDate, endDate, false);
     setDateRangeDialog(false);
     setActiveView("selectRange");
@@ -85,19 +87,30 @@ export default function TimeBar(props: Props) {
         onClose={() => setDateRangeDialog(false)}
         aria-labelledby="date-range-dialog">
         <DialogContent>
-          {/* <StaticDateRangePicker
-            disableFuture
-            value={dateRange}
-            onChange={date => setDateRange(date)}
-            renderInput={(startProps, endProps) => (
-              <React.Fragment>
-                <TextField {...startProps} />
-                <DateRangeDelimiter> to </DateRangeDelimiter>
-                <TextField {...endProps} />
-              </React.Fragment>
-            )}
-          /> */}
-          DATE PICKER GOES HERE
+          <TextField
+            fullWidth
+            margin="normal"
+            type="date"
+            label="Start Time"
+            value={dateRange[0]?.format("YYYY-MM-DD")}
+            onChange={e => {
+              let range = cloneDeep(dateRange)
+              range[0] = moment(e.target.value)
+              setDateRange(range)
+            }}
+          />
+          <TextField
+            fullWidth
+            margin="normal"
+            type="date"
+            label="End Time"
+            value={dateRange[1]?.format("YYYY-MM-DD")}
+            onChange={e => {
+              let range = cloneDeep(dateRange)
+              range[1] = moment(e.target.value)
+              setDateRange(range)
+            }}
+          />
         </DialogContent>
         <DialogActions>
           <Button onClick={() => setDateRangeDialog(false)} color="primary">