update edit creation time date picker

src/components/EnteDateTimePicker.tsx

@@ -1,50 +1,37 @@
 import React from 'react';
 
-import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
 import {
     MIN_EDITED_CREATION_TIME,
     MAX_EDITED_CREATION_TIME,
-    ALL_TIME,
 } from 'constants/file';
-
-const isSameDay = (first, second) =>
-    first.getFullYear() === second.getFullYear() &&
-    first.getMonth() === second.getMonth() &&
-    first.getDate() === second.getDate();
+import { TextField } from '@mui/material';
+import {
+    LocalizationProvider,
+    DesktopDateTimePicker,
+} from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 
 interface Props {
     loading?: boolean;
-    isInEditMode: boolean;
-    pickedTime: Date;
-    handleChange: (date: Date) => void;
+    value: Date;
+    label?: string;
+    onChange: (date: Date) => void;
 }
 
-const EnteDateTimePicker = ({
-    loading,
-    isInEditMode,
-    pickedTime,
-    handleChange,
-}: Props) => (
-    <DatePicker
+const EnteDateTimePicker = ({ loading, value, onChange }: Props) => (
+    <>
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+            <DesktopDateTimePicker
+                maxDateTime={MAX_EDITED_CREATION_TIME}
+                minDateTime={MIN_EDITED_CREATION_TIME}
                 disabled={loading}
-        open={isInEditMode}
-        selected={pickedTime}
-        onChange={handleChange}
-        timeInputLabel="Time:"
-        dateFormat="dd/MM/yyyy h:mm aa"
-        showTimeSelect
-        autoFocus
-        minDate={MIN_EDITED_CREATION_TIME}
-        maxDate={MAX_EDITED_CREATION_TIME}
-        maxTime={
-            isSameDay(pickedTime, new Date())
-                ? MAX_EDITED_CREATION_TIME
-                : ALL_TIME
-        }
-        minTime={MIN_EDITED_CREATION_TIME}
-        fixedHeight
-        withPortal></DatePicker>
+                PopperProps={{ sx: { zIndex: '1502' } }}
+                value={value}
+                onChange={onChange}
+                renderInput={(params) => <TextField {...params} />}
+            />
+        </LocalizationProvider>
+    </>
 );
 
 export default EnteDateTimePicker;

src/components/FixCreationTime/options.tsx

@@ -69,9 +69,8 @@ export default function FixCreationTimeOptions({ handleChange, values }) {
                 {Number(values.option) === FIX_OPTIONS.CUSTOM_TIME && (
                     <Value width="40%">
                         <EnteDateTimePicker
-                            isInEditMode
-                            pickedTime={new Date(values.customTime)}
-                            handleChange={(x: Date) =>
+                            value={new Date(values.customTime)}
+                            onChange={(x: Date) =>
                                 handleChange('customTime')(x.toUTCString())
                             }
                         />

src/components/PhotoSwipe/InfoDialog/RenderCreationTime.tsx

@@ -12,8 +12,8 @@ import { IconButton, Label, Row, Value } from 'components/Container';
 import { logError } from 'utils/sentry';
 import CloseIcon from '@mui/icons-material/Close';
 import TickIcon from '@mui/icons-material/Done';
-import EnteDateTimePicker from 'components/EnteDateTimePicker';
 import { SmallLoadingSpinner } from '../styledComponents/SmallLoadingSpinner';
+import EnteDateTimePicker from 'components/EnteDateTimePicker';
 
 export function RenderCreationTime({
     shouldDisableEdits,
@@ -81,12 +81,13 @@ export function RenderCreationTime({
                             : '70%'
                     }>
                     {isInEditMode ? (
+                        <>
                             <EnteDateTimePicker
                                 loading={loading}
-                            isInEditMode={isInEditMode}
-                            pickedTime={pickedTime}
-                            handleChange={handleChange}
+                                value={pickedTime}
+                                onChange={handleChange}
                             />
+                        </>
                     ) : (
                         formatDateTime(pickedTime)
                     )}

src/constants/file/index.ts

@@ -1,6 +1,5 @@
 export const MIN_EDITED_CREATION_TIME = new Date(1800, 0, 1);
 export const MAX_EDITED_CREATION_TIME = new Date();
-export const ALL_TIME = new Date(1800, 0, 1, 23, 59, 59);
 
 export const MAX_EDITED_FILE_NAME_LENGTH = 100;
 export const MAX_TRASH_BATCH_SIZE = 1000;

src/utils/file/index.ts

@@ -202,7 +202,7 @@ export function formatDateTime(date: number | Date) {
         day: 'numeric',
     });
     const timeFormat = new Intl.DateTimeFormat('en-IN', {
-        timeStyle: 'medium',
+        timeStyle: 'short',
     });
     return `${dateTimeFormat.format(date)} ${timeFormat.format(date)}`;
 }