calendar appears on screen

8bitcoffee · Feb 26, 2024 · ed5b9b2 · ed5b9b2
1 parent a95f3dc
commit ed5b9b2
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,15 +6,19 @@
     "node": "18.x"
   },
   "dependencies": {
+    "@date-io/date-fns": "^3.0.0",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.8",
     "@mailchimp/mailchimp_transactional": "^1.0.57",
     "@mui/icons-material": "^5.15.10",
     "@mui/material": "^5.15.11",
+    "@mui/x-date-pickers": "^6.19.5",
     "axios": "^1.6.2",
     "bcryptjs": "^2.4.3",
     "cookie-session": "^2.0.0",
+    "date-fns": "^3.3.1",
+    "dayjs": "^1.11.10",
     "dotenv": "^16.0.3",
     "express": "^4.17.1",
     "i18next": "^23.8.2",

diff --git a/src/components/AdminProjectModal/AdminProjectModal.jsx b/src/components/AdminProjectModal/AdminProjectModal.jsx
@@ -1,6 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Stack, Select, MenuItem, TextField, FormControl, InputLabel, Button, TableContainer, Paper, Table, TableCell, TableRow, TableHead, TableBody, IconButton } from '@mui/material';
+import { Stack, Select, MenuItem, TextField, FormControl, InputLabel} from '@mui/material';
+import dayjs, { Dayjs } from 'dayjs';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 
 function AdminProjectModal({ closeModal, defaultValues }) {
 
@@ -71,12 +76,13 @@ function AdminProjectModal({ closeModal, defaultValues }) {
                             value={project.duration}
                             onChange={(event) => handleChangeFor("duration", event.target.value)}
                         />
-                        <TextField
-                            label="due_at"
-                            sx={{ width: '400px', margin: '20px 0' }}
+                        <LocalizationProvider dateAdapter={AdapterDayjs}>   
+                        <DatePicker
+                            label="Due Date"
                             value={project.due_at}
                             onChange={(event) => handleChangeFor("due_at", event.target.value)}
                         />
+                        </LocalizationProvider>
                         <FormControl sx={{ width: '400px', margin: '20px 0' }}>
                             <InputLabel id="select-from-language">From Language</InputLabel>
                             <Select