Added temp date pickers, we love fns

src/client/package-lock.json

@@ -8,13 +8,15 @@
       "name": "tournament-server",
       "version": "1.0.0",
       "dependencies": {
+        "@date-io/date-fns": "^2.11.0",
         "@emotion/react": "^11.8.2",
         "@emotion/styled": "^11.8.1",
         "@mui/icons-material": "^5.5.1",
-        "@mui/lab": "^5.0.0-alpha.76",
+        "@mui/lab": "^5.0.0-alpha.61",
         "@mui/material": "^5.5.2",
         "@mui/styled-engine-sc": "^5.5.2",
         "bootstrap": "^5.1.3",
+        "date-fns": "^2.27.0",
         "iarn": "0.0.0",
         "less": "^4.1.2",
         "react": "^17.0.2",
@@ -5574,6 +5576,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -19441,6 +19455,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
+    },
     "debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",

src/client/package.json

@@ -6,13 +6,15 @@
   "private": true,
   "homepage": "",
   "dependencies": {
+    "@date-io/date-fns": "^2.11.0",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.5.1",
-    "@mui/lab": "^5.0.0-alpha.76",
+    "@mui/lab": "^5.0.0-alpha.61",
     "@mui/material": "^5.5.2",
     "@mui/styled-engine-sc": "^5.5.2",
     "bootstrap": "^5.1.3",
+    "date-fns": "^2.27.0",
     "iarn": "0.0.0",
     "less": "^4.1.2",
     "react": "^17.0.2",

src/client/src/TournamentCreator.js

@@ -5,6 +5,9 @@ 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 DatePicker from '@mui/lab/DatePicker';
+import AdapterDateFns from '@mui/lab/AdapterDateFns';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
 
 function postTournament(showError, tournamentName, tournamentDescription, tournamentStartDate, tournamentEndDate, tournamentMaxTeams) {
   if (!tournamentName || tournamentName === "") {
@@ -98,6 +101,8 @@ function TournamentForm(props) {
     {  value: 7,  label: "128",}
   ];
 
+  const [value, setValue] = React.useState([null, null]);
+
   return (
     <>
     <form>
@@ -106,26 +111,31 @@ function TournamentForm(props) {
         <TextField type="text" id="nameInput" label="Tournament Name" placeholder="Tournament Name" InputLabelProps={{shrink: true}}/>
         {/* <InputLabel htmlFor="descriptionInput">Description: </InputLabel */}
         <TextField type="text" multiline={true} id="descriptionInput" label="Description" placeholder="Description" InputLabelProps={{shrink: true}}/>        
-        {/* <Box sx={{ flexGrow: 1 }}>
-          <Grid container spacing={1} justifyContent="center" wrap="wrap">
-            <Grid item xs={3}>
-              <Typography>Edit Image:</Typography>
-            </Grid>
-            <Grid item xs={2}>
-              <Container>
-                <label htmlFor="editImage">
-                  <Button variant="contained" component="span" endIcon={<FileUploadIcon />}>
-                    Upload 
-                  </Button>
-                  <input accept="image/*" id="editImage" multiple type="file" style={{ display: 'none' }} />
-                </label>
-              </Container>
-            </Grid>
-          </Grid>
-        </Box> */}
         <Box>
-          <TextField type="datetime-local" id="startDatePicker" label="Start Time" InputLabelProps={{shrink: true}} sx={{width: "48%", marginRight: "2%"}} />
+          <LocalizationProvider dateAdapter={AdapterDateFns}>
-          <TextField type="datetime-local" id="endDatePicker" label="End Time" InputLabelProps={{shrink: true}} sx={{width: "48%", marginLeft: "2%"}} />
+            <DatePicker
+              label="Start Time"
+              value={value}
+              id="startDatePicker"
+              onChange={(newValue) => {
+                setValue(newValue);
+              }}
+              renderInput={(params) => <TextField {...params} />}
+            />
+          </LocalizationProvider>
+          <LocalizationProvider dateAdapter={AdapterDateFns}>
+            <DatePicker
+              label="End Time"
+              value={value}
+              id="endDatePicker"
+              onChange={(newValue) => {
+                setValue(newValue);
+              }}
+              renderInput={(params) => <TextField {...params} />}
+            />
+          </LocalizationProvider>
+          {/* <TextField type="datetime-local" id="startDatePicker" label="Start Time" InputLabelProps={{shrink: true}} sx={{width: "48%", marginRight: "2%"}} />
+          <TextField type="datetime-local" id="endDatePicker" label="End Time" InputLabelProps={{shrink: true}} sx={{width: "48%", marginLeft: "2%"}} /> */}
         </Box>
         <InputLabel id="max-teams-label">Maximum number of teams</InputLabel>