From f93040c32f3751f6854c20dcb040589f5cc8d297 Mon Sep 17 00:00:00 2001
From: Amin Ghasempoor <aminghasempoor79@gmail.com>
Date: Mon, 10 Jul 2023 15:37:14 +0330
Subject: [PATCH] add date picker text to locales

---
 package-lock.json                     | 11 ++++++++
 package.json                          |  1 +
 public/locales/fa/app.json            |  5 +++-
 src/components/login-expert/index.jsx |  2 --
 src/core/components/MuiDatePicker.jsx | 36 +++++++++++++++++++++++++++
 5 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4b0a11b..92c0e14 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@mui/material": "^5.12.0",
         "@mui/x-date-pickers": "^6.9.2",
         "axios": "^1.4.0",
+        "dayjs": "^1.11.9",
         "eslint": "8.36.0",
         "formik": "^2.2.9",
         "fs-extra": "^11.1.1",
@@ -1731,6 +1732,11 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "node_modules/dayjs": {
+      "version": "1.11.9",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
+      "integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -6129,6 +6135,11 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "dayjs": {
+      "version": "1.11.9",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
+      "integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
diff --git a/package.json b/package.json
index 647d809..06207ce 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@mui/material": "^5.12.0",
     "@mui/x-date-pickers": "^6.9.2",
     "axios": "^1.4.0",
+    "dayjs": "^1.11.9",
     "eslint": "8.36.0",
     "formik": "^2.2.9",
     "fs-extra": "^11.1.1",
diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json
index dd3068b..09654eb 100644
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -42,7 +42,10 @@
     "link_routing_main_page": "صفحه اصلی",
     "error_message_required": "اجباری!"
   },
-  "dashboard": {
+  "Dashboard": {
     "dashboard_page": "داشبورد"
+  },
+  "MuiDatePicker": {
+    "date_picker_birthday": "تاریخ"
   }
 }
diff --git a/src/components/login-expert/index.jsx b/src/components/login-expert/index.jsx
index 5db34c4..65b1e1c 100644
--- a/src/components/login-expert/index.jsx
+++ b/src/components/login-expert/index.jsx
@@ -1,5 +1,4 @@
 import LinkRouting from "@/core/components/LinkRouting";
-import MuiDatePicker from "@/core/components/MuiDatePicker";
 // import Notifications from "@/core/components/notifications";
 import PasswordField from "@/core/components/PasswordField";
 import StyledForm from "@/core/components/StyledForm";
@@ -99,7 +98,6 @@ const LoginComponent = () => {
                           props.touched.username ? props.errors.username : null
                         }
                       />
-                      {/* <MuiDatePicker /> */}
                       <PasswordField
                         name="password"
                         label={t("LoginPage.text_field_password")}
diff --git a/src/core/components/MuiDatePicker.jsx b/src/core/components/MuiDatePicker.jsx
index e69de29..070424f 100644
--- a/src/core/components/MuiDatePicker.jsx
+++ b/src/core/components/MuiDatePicker.jsx
@@ -0,0 +1,36 @@
+import { LocalizationProvider, DatePicker } from "@mui/x-date-pickers";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import moment from "moment/moment";
+import { useTranslations } from "next-intl";
+
+export default function MuiDatePicker({
+  setFieldValue,
+  selectType,
+  error,
+  helperText,
+}) {
+  const t = useTranslations();
+
+  const handleDateChange = (date) => {
+    const selectedDate = moment(date).locale("en").format("YYYY-MM-DD");
+    setFieldValue(selectType, selectedDate);
+  };
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DatePicker
+        sx={{ width: "100%" }}
+        format="YYYY-MM-DD"
+        label={t("MuiDatePicker.date_picker_birthday")}
+        slotProps={{
+          textField: {
+            size: "small",
+            helperText: helperText ? `${helperText}` : "YYYY-MM-DD",
+            error: error ? true : false,
+          },
+        }}
+        onChange={handleDateChange}
+      />
+    </LocalizationProvider>
+  );
+}