add date picker text to locales

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",

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",

public/locales/fa/app.json

@@ -42,7 +42,10 @@
     "link_routing_main_page": "صفحه اصلی",
     "error_message_required": "اجباری!"
   },
-  "dashboard": {
+  "Dashboard": {
     "dashboard_page": "داشبورد"
+  },
+  "MuiDatePicker": {
+    "date_picker_birthday": "تاریخ"
   }
 }

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")}

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>
+  );
+}