added new date inputs, not fully functional

src/client/src/TournamentCreator.js

@@ -4,7 +4,6 @@ import AppBar from "./components/AsuraBar";
 import ErrorSnackbar from "./components/ErrorSnackbar";
 
 import { Button, TextField, Stack, InputLabel, Select, Container, Slider, Paper, Box, Grid, Typography } from '@mui/material';
-import FileUploadIcon from '@mui/icons-material/FileUpload';
 import DateTimePicker from '@mui/lab/DateTimePicker';
 import AdapterDateFns from '@mui/lab/AdapterDateFns';
 import LocalizationProvider from '@mui/lab/LocalizationProvider';
@@ -90,6 +89,7 @@ function TournamentForm(props) {
       endTime,
       maxTeams
     );
+    console.log(startTime, endTime);
   }
 
   const marks = [
@@ -101,7 +101,8 @@ function TournamentForm(props) {
     {  value: 7,  label: "128",}
   ];
 
-  const [value, setValue] = React.useState([null, null]);
+  const [startValue, setStartValue] = React.useState(new Date());
+  const [endValue, setEndValue] = React.useState(new Date());
 
   return (
     <>
@@ -114,24 +115,34 @@ function TournamentForm(props) {
         <Box>
           <LocalizationProvider dateAdapter={AdapterDateFns}>
             <DateTimePicker
-              label="Start Time"
+              label={"Start Time"}
-              value={value}
+              inputVariant="outlined"
-              id="startDatePicker"
+              ampm={false}
+              mask="____-__-__ __:__"
+              format="yyyy-MM-dd HH:mm"
+              inputFormat="yyyy-MM-dd HH:mm"
+              value={startValue}
               onChange={(newValue) => {
-                setValue(newValue);
+                setStartValue(newValue);
+                console.log(new Date(newValue).toUTCString());
               }}
-              renderInput={(params) => <TextField {...params} />}
+              renderInput={(params) => <TextField id="startDatePicker" {...params} />}
             />
           </LocalizationProvider>
           <LocalizationProvider dateAdapter={AdapterDateFns}>
             <DateTimePicker
-              label="End Time"
+              label={"End Time"}
-              value={value}
+              inputVariant="outlined"
-              id="endDatePicker"
+              ampm={false}
+              mask="____-__-__ __:__"
+              format="yyyy-MM-dd HH:mm"
+              inputFormat="yyyy-MM-dd HH:mm"
+              value={endValue}
               onChange={(newValue) => {
-                setValue(newValue);
+                setEndValue(newValue);
+                console.log(new Date(newValue).toUTCString());
               }}
-              renderInput={(params) => <TextField {...params} />}
+              renderInput={(params) => <TextField id="endDatePicker" {...params} />}
             />
           </LocalizationProvider>
           {/* <TextField type="datetime-local" id="startDatePicker" label="Start Time" InputLabelProps={{shrink: true}} sx={{width: "48%", marginRight: "2%"}} />

src/client/src/TournamentManager.js

@@ -6,9 +6,11 @@ import TournamentBar from "./components/TournamentBar";
 import { useParams } from "react-router-dom";
 import { Button, TextField, Grid, Box, Container, Paper, Stack } from "@mui/material";
 import { Snackbar, IconButton, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
-import FileUploadIcon from '@mui/icons-material/FileUpload';
 import CloseIcon from '@mui/icons-material/Close';
 import DeleteIcon from '@mui/icons-material/Delete';
+import DateTimePicker from '@mui/lab/DateTimePicker';
+import AdapterDateFns from '@mui/lab/AdapterDateFns';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
 
 let submitChanges = curryTournamentId => event => {
   event.preventDefault();
@@ -113,19 +115,57 @@ function ManageTournament(props) {
         document.getElementById("editDesc").value = data.data.description;
         document.getElementById("editStartDate").value = data.data.startTime.slice(0, 16);
         document.getElementById("editEndDate").value = data.data.endTime.slice(0, 16);
+        console.log(data.data.endTime);
+        console.log(data.data.endTime.slice(0, 16));
       })
       .catch((err) => showError(err));
   }, []);
   
+  const [startValue, setStartValue] = React.useState();
+  const [endValue, setEndValue] = React.useState();
+
   return (
     <>
     <form>
     <Stack sx={{minHeight: "30vh", margin: "10px auto"}} direction="column" justifyContent="center" spacing={2} align="center">
           <TextField type="text" id="editName" label="Edit Name:" placeholder="Edit Name" InputLabelProps={{shrink: true}}/>
           <TextField type="text" multiline={true} id="editDesc" label="Edit Description:" placeholder="Edit Description" InputLabelProps={{shrink: true}} />
-          
+          <Box>
-          <TextField type="datetime-local" id="editStartDate" label="Edit Start Time" InputLabelProps={{shrink: true,}}/>
+          <LocalizationProvider dateAdapter={AdapterDateFns}>
-          <TextField type="datetime-local" id="editEndDate" label="Edit End Time" InputLabelProps={{shrink: true}}/>
+            <DateTimePicker
+              label={"Start Time"}
+              inputVariant="outlined"
+              ampm={false}
+              mask="____-__-__ __:__"
+              format="yyyy-MM-dd HH:mm"
+              inputFormat="yyyy-MM-dd HH:mm"
+              value={startValue}
+              onChange={(newValue) => {
+                setStartValue(newValue);
+                console.log(new Date(newValue).toUTCString());
+              }}
+              renderInput={(params) => <TextField id="editStartDate" {...params} />}
+            />
+          </LocalizationProvider>
+          <LocalizationProvider dateAdapter={AdapterDateFns}>
+            <DateTimePicker
+              label={"End Time"}
+              inputVariant="outlined"
+              ampm={false}
+              mask="____-__-__ __:__"
+              format="yyyy-MM-dd HH:mm:"
+              inputFormat="yyyy-MM-dd HH:mm"
+              value={endValue}             
+              onChange={(newValue) => {
+                setEndValue(newValue);
+                console.log(new Date(newValue).toUTCString());
+              }}
+              renderInput={(params) => <TextField id="editEndDate" {...params} />}
+            />
+          </LocalizationProvider>
+        </Box>
+          {/* <TextField type="datetime-local" id="editStartDate" label="Edit Start Time" InputLabelProps={{shrink: true,}}/>
+          <TextField type="datetime-local" id="editEndDate" label="Edit End Time" InputLabelProps={{shrink: true}}/> */}
 
           <Button type="submit" variant="contained" onClick={submitChanges(props.tournamentId)} color="primary" >
             Save Tournament Details