see if this can be built

loculus-project · Feb 21, 2024 · 80c2909 · 80c2909
1 parent f3c37d9
commit 80c2909
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 15 deletions.
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -40,6 +40,7 @@
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-confirm-alert": "^3.0.6",
+    "react-datepicker": "^5.0.0",
     "react-dom": "^18.2.0",
     "react-tooltip": "^5.26.3",
     "unplugin-icons": "^0.18.5",

diff --git a/website/src/components/DataUploadForm.tsx b/website/src/components/DataUploadForm.tsx
@@ -1,5 +1,6 @@
 import { CircularProgress, TextField } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
+import "react-datepicker/dist/react-datepicker.css";
+import DatePicker from "react-datepicker";
 import { isErrorFromAlias } from '@zodios/core';
 import type { AxiosError } from 'axios';
 import { type DateTime } from 'luxon';
@@ -24,6 +25,7 @@ import { stringifyMaybeAxiosError } from '../utils/stringifyMaybeAxiosError.ts';
 import PhDnaLight from '~icons/ph/dna-light';
 import MaterialSymbolsLightDataTableOutline from '~icons/material-symbols-light/data-table-outline';
 import MaterialSymbolsInfoOutline from '~icons/material-symbols/info-outline';
+
 type Action = 'submit' | 'revise';
 
 type DataUploadFormProps = {
@@ -256,20 +258,7 @@ const InnerDataUploadForm = ({
                     <div className='fixed inset-0 bg-gray-900 bg-opacity-75 flex justify-center items-center z-50'>
                         <div className='bg-white p-6 rounded-lg'>
                             <h2 className='font-medium text-lg'>Change date until which sequences are restricted</h2>
-                            <DatePicker
-                                format='yyyy-MM-dd'
-                                value={restrictedUntil}
-                                label='Restricted Until'
-                                minDate={dateTimeInMonths(0)}
-                                maxDate={dateTimeInMonths(12)}
-                                slotProps={{
-                                    textField: {
-                                        size: 'small',
-                                        margin: 'dense',
-                                    },
-                                }}
-                                onChange={(date: DateTime | null) => (date !== null ? setRestrictedUntil(date) : null)}
-                            />
+                            <DatePicker selected={startdate} onChange={(date) => setStartDate(date)} />
                             <div className='flex justify-end gap-4 mt-4'>
                                 <button
                                     className='px-4 py-2 btn normal-case'