Merge branch 'main' into update-react-router-7.1.1

Author: Arnei

package-lock.json

@@ -9,19 +9,19 @@
     "@mui/material": "^6.3.0",
     "@mui/x-date-pickers": "^7.23.1",
     "@reduxjs/toolkit": "^2.5.0",
-    "@types/dompurify": "^3.0.5",
+    "@types/dompurify": "^3.2.0",
     "array-move": "^4.0.0",
     "axios": "^1.7.9",
     "bourbon": "^7.3.0",
     "classnames": "^2.5.1",
     "date-fns": "^3.6.0",
-    "dompurify": "^3.1.7",
+    "dompurify": "^3.2.3",
     "font-awesome": "^4.7.0",
     "formik": "^2.4.6",
     "http-proxy-middleware": "^3.0.3",
     "i18next": "^24.2.0",
     "i18next-browser-languagedetector": "^8.0.2",
-    "i18next-http-backend": "^2.6.1",
+    "i18next-http-backend": "^3.0.1",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.46",

package.json

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import cn from "classnames";
 import _ from "lodash";
-import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import DatePicker from "react-datepicker";
 import { Formik, FormikErrors, FormikProps } from "formik";
 import { Field } from "../../../shared/Field";
 import Notifications from "../../../shared/Notifications";
@@ -195,12 +195,12 @@ const EventDetailsSchedulingTab = ({
 			: [];
 
 		return {
-			scheduleStartDate: startDate.setHours(0, 0, 0).toString(),
+			scheduleStartDate: startDate.toString(),
 			scheduleStartHour: source.start.hour != null ? makeTwoDigits(source.start.hour) : "",
 			scheduleStartMinute: source.start.minute != null ? makeTwoDigits(source.start.minute) : "",
 			scheduleDurationHours: source.duration.hour != null ? makeTwoDigits(source.duration.hour) : "",
 			scheduleDurationMinutes: source.duration.minute != null ? makeTwoDigits(source.duration.minute): "",
-			scheduleEndDate: endDate.setHours(0, 0, 0).toString(),
+			scheduleEndDate: endDate.toString(),
 			scheduleEndHour: source.end.hour != null ? makeTwoDigits(source.end.hour): "",
 			scheduleEndMinute: source.end.minute != null ? makeTwoDigits(source.end.minute): "",
 			captureAgent: source.device.name,
@@ -286,8 +286,7 @@ const EventDetailsSchedulingTab = ({
 																/* date picker for start date */
 																<DatePicker
 																	name="scheduleStartDate"
-																	// tabIndex={1}
-																	value={new Date(formik.values.scheduleStartDate)}
+																	selected={new Date(formik.values.scheduleStartDate)}
 																	onChange={(value: Date | null) =>
 																		value && changeStartDate(
 																			value,
@@ -297,6 +296,14 @@ const EventDetailsSchedulingTab = ({
 																			checkConflictsWrapper
 																		)
 																	}
+																	showYearDropdown
+																	showMonthDropdown
+																	yearDropdownItemNumber={2}
+																	dateFormat="P"
+																	popperClassName="datepicker-custom"
+																	className="datepicker-custom-input"
+																	portalId="root"
+																	locale={currentLanguage?.dateLocale}
 																/>
 															) : (
 																<>

src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
 import Notifications from "../../../shared/Notifications";
-import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import DatePicker from "react-datepicker";
 import {
 	getCurrentLanguageInformation,
 	getTimezoneOffset,
@@ -444,7 +444,7 @@ const Schedule = <T extends {
 							<td>
 								<DatePicker
 									name="scheduleStartDate"
-									value={typeof formik.values.scheduleStartDate === "string" ? parseISO(formik.values.scheduleStartDate): formik.values.scheduleStartDate}
+									selected={typeof formik.values.scheduleStartDate === "string" ? parseISO(formik.values.scheduleStartDate): formik.values.scheduleStartDate}
 									onChange={(value) => {
 										if (formik.values.sourceMode === "SCHEDULE_MULTIPLE") {
 											value && changeStartDateMultiple(
@@ -460,6 +460,14 @@ const Schedule = <T extends {
 											);
 										}
 									}}
+									showYearDropdown
+									showMonthDropdown
+									yearDropdownItemNumber={2}
+									dateFormat="P"
+									popperClassName="datepicker-custom"
+									className="datepicker-custom-input"
+									portalId="root"
+									locale={currentLanguage?.dateLocale}
 								/>
 							</td>
 						</tr>
@@ -474,14 +482,22 @@ const Schedule = <T extends {
 									<td>
 										<DatePicker
 											name="scheduleEndDate"
-											value={typeof formik.values.scheduleEndDate === "string" ? parseISO(formik.values.scheduleEndDate) : formik.values.scheduleEndDate}
+											selected={typeof formik.values.scheduleEndDate === "string" ? parseISO(formik.values.scheduleEndDate) : formik.values.scheduleEndDate}
 											onChange={(value) =>
 												value && changeEndDateMultiple(
 													value,
 													formik.values,
 													formik.setFieldValue
 												)
 											}
+											showYearDropdown
+											showMonthDropdown
+											yearDropdownItemNumber={2}
+											dateFormat="P"
+											popperClassName="datepicker-custom"
+											className="datepicker-custom-input"
+											portalId="root"
+											locale={currentLanguage?.dateLocale}
 										/>
 									</td>
 								</tr>