From 22e45fc5dfd39aa887d73e6174d0c4231603b3f4 Mon Sep 17 00:00:00 2001
From: 9sneha-n <9sneha.n@gmail.com>
Date: Wed, 8 May 2024 22:07:44 +0530
Subject: [PATCH] fix: use material ui date picker for enhanced user experience

---
 .../widgets/DatePickerWidget.tsx               | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/webapp/components/survey-questions/widgets/DatePickerWidget.tsx b/src/webapp/components/survey-questions/widgets/DatePickerWidget.tsx
index e2915280..2bcb511a 100644
--- a/src/webapp/components/survey-questions/widgets/DatePickerWidget.tsx
+++ b/src/webapp/components/survey-questions/widgets/DatePickerWidget.tsx
@@ -1,8 +1,9 @@
-import { DatePicker } from "@eyeseetea/d2-ui-components";
 import React from "react";
 // @ts-ignore
 import { Maybe } from "../../../../types/utils";
 import { BaseWidgetProps } from "./BaseWidget";
+import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 
 export interface DatePickerWidgetProps extends BaseWidgetProps<Date> {
     value: Maybe<Date>;
@@ -23,13 +24,14 @@ const DatePickerWidget: React.FC<DatePickerWidgetProps> = props => {
         [onValueChange]
     );
     return (
-        <DatePicker
-            key={props.name}
-            name={props.name}
-            value={stateValue}
-            disabled={props.disabled}
-            onChange={newValue => notifyChange(newValue)}
-        />
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+            <DatePicker
+                key={props.name}
+                value={stateValue}
+                disabled={props.disabled}
+                onChange={newValue => notifyChange(newValue)}
+            />
+        </LocalizationProvider>
     );
 };