ISSUE #4639 - use v5 datepicker to fix big where date reverts to old value on cancel

Author: The-Daniel

frontend/src/v4/routes/components/dateField/dateField.component.tsx

@@ -14,12 +14,11 @@
  *  You should have received a copy of the GNU Affero General Public License
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { ComponentType, useEffect } from 'react';
-import { DatePickerProps } from '@mui/lab/DatePicker';
-import { DateTimePickerProps } from '@mui/lab/DateTimePicker';
+import { useEffect } from 'react';
 import { TextField } from '@mui/material';
 import { useState } from 'react';
-import { StyledDatePicker, StyledDateTimePicker } from './dateField.styles';
+import { DateTimePicker } from '@controls/inputs/datePicker/dateTimePicker.component';
+import { DatePicker } from '@controls/inputs/datePicker/datePicker.component';
 
 interface IProps {
 	value?: any;
@@ -48,7 +47,7 @@ export const DateField = ({
 	...dateFieldProps
 }: IProps) => {
 	const [value, setValue] = useState(propValue || null);
-	const Picker: ComponentType<DatePickerProps | DateTimePickerProps> = dateTime ? StyledDateTimePicker : StyledDatePicker;
+	const Picker = dateTime ? DateTimePicker : DatePicker;
 
 	const handleAccept = (newValue) => {
 		if (newValue) {
@@ -78,11 +77,13 @@ export const DateField = ({
 					defaultValue={defaultValue}
 					name={name}
 					onBlur={onBlur}
-					className={className}
 					{...props}
+					InputProps={{ endAdornment: null }}
 				/>
 			)}
+			className={className}
 			{...dateFieldProps}
+			components={{ ActionBar: null }}
 		/>
 	);
 };

frontend/src/v4/routes/components/dateField/dateField.styles.ts

@@ -25,7 +25,7 @@ type ICalendarActionBar = {
 export const CalendarActionBar = ({ onClear, hidden }: ICalendarActionBar) => {
 	if (hidden) return null;
 	return (
-		<ClearDateAction onClick={onClear} hidden={hidden}>
+		<ClearDateAction onClick={onClear}>
 			<FormattedMessage id="datePicker.actionBar.clear" defaultMessage="Clear date" />
 		</ClearDateAction>
 	);

frontend/src/v5/ui/controls/inputs/datePicker/baseCalendarPicker/calendarActionBar/calendarActionBar.component.tsx

@@ -35,11 +35,14 @@ export default css`
 		}
 		${SequenceDateContainer} {
 			width: 190px;
-			${SequenceDateField} {
+			${SequenceDateField} { // HERE
+				outline: 1px solid peru;
 				.MuiInputBase-root {
+					outline: 1px solid hotpink;
 					margin: 0px;
-
+					
 					input {
+						outline: 1px solid lightgoldenrodyellow;
 						color: ${({ theme }) => theme.palette.secondary.main};
 						box-sizing: border-box;
 						width: 184px;