fix: Bug: Date picker controls cause MFE error on Safari #2323

Author: Ahtesham Quraish

package-lock.json

@@ -80,7 +80,7 @@
     "moment-shortformat": "^2.1.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
-    "react-datepicker": "^4.13.0",
+    "react-datepicker": "^7.6.0",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-helmet": "^6.1.0",

package.json

@@ -934,7 +934,7 @@ describe('<CourseOutline />', () => {
   it('check configure modal for section', async () => {
     const { findByTestId, findAllByTestId } = renderComponent();
     const section = courseOutlineIndexMock.courseStructure.childInfo.children[0];
-    const newReleaseDateIso = '2025-09-10T22:00:00Z';
+    const newReleaseDateIso = '2025-09-10T22:00:00.000Z';
     const newReleaseDate = '09/10/2025';
     axiosMock
       .onPost(getCourseItemApiUrl(section.id), {
@@ -999,7 +999,7 @@ describe('<CourseOutline />', () => {
       prereqMinCompletion: 100,
       metadata: {
         visible_to_staff_only: null,
-        due: '2025-09-10T05:00:00Z',
+        due: '2025-09-10T05:00:00.000Z',
         hide_after_due: true,
         show_correctness: 'always',
         is_practice_exam: false,
@@ -1008,7 +1008,7 @@ describe('<CourseOutline />', () => {
         exam_review_rules: '',
         default_time_limit_minutes: 3270,
         is_onboarding_exam: false,
-        start: '2025-08-10T00:00:00Z',
+        start: '2025-08-10T00:00:00.000Z',
       },
     };
 

src/course-outline/CourseOutline.test.tsx

@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react';
 import { useToggle } from '@openedx/paragon';
 
 import { COMMA_SEPARATED_DATE_FORMAT } from '../constants';
-import { convertToDateFromString } from '../utils';
 import { getCourseHandouts, getCourseUpdates } from './data/selectors';
 import { REQUEST_TYPES } from './constants';
 import {
@@ -56,7 +55,7 @@ const useCourseUpdates = ({ courseId }) => {
   };
 
   const handleUpdatesSubmit = (data) => {
-    const dateWithoutTimezone = convertToDateFromString(data.date);
+    const dateWithoutTimezone = data.date;
     const dataToSend = {
       ...data,
       date: moment(dateWithoutTimezone).format(COMMA_SEPARATED_DATE_FORMAT),

src/course-updates/hooks.jsx

@@ -13,8 +13,6 @@ import { Calendar as CalendarIcon, Error as ErrorIcon } from '@openedx/paragon/i
 import { Formik } from 'formik';
 
 import {
-  convertToStringFromDate,
-  convertToDateFromString,
   isValidDate,
 } from '../../utils';
 import { DATE_FORMAT, DEFAULT_EMPTY_WYSIWYG_VALUE } from '../../constants';
@@ -73,7 +71,7 @@ const UpdateForm = ({
                   <DatePicker
                     name="date"
                     data-testid="course-updates-datepicker"
-                    selected={isValidDate(values.date) ? convertToDateFromString(values.date) : ''}
+                    selected={isValidDate(values.date) ? values.date : ''}
                     dateFormat={DATE_FORMAT}
                     className={classNames('datepicker-custom-control', {
                       'datepicker-custom-control_isInvalid': !isValid,
@@ -85,7 +83,7 @@ const UpdateForm = ({
                       if (!isValidDate(value)) {
                         return;
                       }
-                      setFieldValue('date', convertToStringFromDate(value));
+                      setFieldValue('date', value);
                     }}
                   />
                 </div>

src/course-updates/update-form/UpdateForm.jsx

@@ -6,7 +6,7 @@ import { Form, Icon } from '@openedx/paragon';
 import { Calendar } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { convertToDateFromString, convertToStringFromDate, isValidDate } from '../../utils';
+import { isValidDate } from '../../utils';
 import { DATE_FORMAT, TIME_FORMAT } from '../../constants';
 import messages from './messages';
 
@@ -27,7 +27,7 @@ const DatepickerControl = ({
   onChange,
 }) => {
   const intl = useIntl();
-  const formattedDate = convertToDateFromString(value);
+  const formattedDate = value;
   const inputFormat = {
     [DATEPICKER_TYPES.date]: DATE_FORMAT,
     [DATEPICKER_TYPES.time]: TIME_FORMAT,
@@ -69,7 +69,7 @@ const DatepickerControl = ({
           showPopperArrow={false}
           onChange={(date) => {
             if (isValidDate(date)) {
-              onChange(convertToStringFromDate(date));
+              onChange(date);
             }
           }}
         />

src/generic/datepicker-control/DatepickerControl.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
-import { convertToStringFromDate } from '../../utils';
 import { DatepickerControl, DATEPICKER_TYPES } from '.';
 import messages from './messages';
 import { DATE_FORMAT } from '../../constants';
@@ -45,7 +44,7 @@ describe('<DatepickerControl />', () => {
     const input = getByPlaceholderText(DATE_FORMAT.toLocaleUpperCase());
     fireEvent.change(input, { target: { value: '06/16/2023' } });
     expect(onChangeMock).toHaveBeenCalledWith(
-      convertToStringFromDate('06/16/2023'),
+      new Date('2023-06-16T00:00:00.000Z'),
     );
   });
 });

src/generic/datepicker-control/DatepickerControl.test.jsx

@@ -37,7 +37,7 @@ describe('<ScheduleRow />', () => {
     const input = getByPlaceholderText('MM/DD/YYYY');
     fireEvent.change(input, { target: { value: '06/15/2023' } });
     expect(onChangeMock).toHaveBeenCalledWith(
-      '2023-06-15T00:00:00Z',
+      new Date('2023-06-15T00:00:00Z'),
       props.controlName,
     );
   });