Adjusted selector for start date to allow time selection

SaintPepsi · Jan 4, 2022 · a81522c · a81522c
1 parent 7c243e3
commit a81522c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/src/app/Pages/Settings/Components/StartDatePicker.tsx b/src/app/Pages/Settings/Components/StartDatePicker.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import { isValid, startOfDay, addMinutes } from 'date-fns'
+import { isValid } from 'date-fns'
+import moment from "moment";
 
-import DesktopDatePicker from '@mui/lab/DesktopDatePicker';
+import DateTimePicker from '@mui/lab/DateTimePicker';
 import { TextField, FormControl } from '@mui/material';
 
 import { useAppSelector, useAppDispatch } from '@/app/redux/hooks';
@@ -13,23 +14,20 @@ export default function StartDatePicker() {
   const startDate = useAppSelector(state => state.settings.editingProfile.statSettings.startDate);
   const dispatch = useAppDispatch()
 
+  const returnTodayUtcEnd = (date: Date) => moment.utc(date).endOf("day").valueOf();
 
   const handleDateChange = (date: Date | null) => {
-    if (date != undefined && isValid(new Date(date))) {
-      const newDate = startOfDay(addMinutes(new Date(date), new Date().getTimezoneOffset())).getTime();
-      dispatch(updateEditProfileByPath({ data: newDate, path: configPaths.statSettings.startDate }))
-    }
+    if (date != undefined && isValid(date))dispatch(updateEditProfileByPath({ data: moment(date).valueOf(), path: configPaths.statSettings.startDate }))
   };
-  
+
   return (
     <FormControl style={{ width: "100%" }} className="settings-datePicker">
-      <DesktopDatePicker
-        label="Stats Start Date"
-        views={['day']}
-        inputFormat="MM/dd/yyyy"
+      <DateTimePicker
+        label="Start Date"
         value={startDate}
         onChange={handleDateChange}
-        renderInput={(params) => <TextField {...params} helperText={params?.inputProps?.placeholder} />}
+        maxDate={new Date( returnTodayUtcEnd(new Date()) )}
+        renderInput={(params) => <TextField {...params} />}
         className="desktopPicker"
       />
 

diff --git a/src/app/Pages/Settings/Settings.tsx b/src/app/Pages/Settings/Settings.tsx
@@ -65,6 +65,8 @@ const SettingsPage = () => {
                         }}>
                             <p className="subText">The selected currency below will control what the <strong>entire application</strong> is filtered by. ex: if you select USD and also have USDT deals you will not see the USDT deals displayed. You currently cannot mix currencies except USD pegged.</p>
                             <CurrencySelector />
+
+                            <p className="subText">The selected time below will modify what displays in all historical charts. This time is in your local timezone, so if 3Commas rolls over at 8pm for you set it to your start date to the date at 8pm.</p>
                             <StartDatePicker />
                         </div>
                         <div style={{