add date picker to orgdetail

src/pages/Organization/DetailPage/OrganizationCard.js

@@ -23,27 +23,13 @@ import { notifySaveSuccess } from 'utils/CommonFunction';
 import { useIntl } from "react-intl";
 import { PNSPS_BUTTON_THEME } from "themes/buttonConst";
 import { ThemeProvider } from "@emotion/react";
-import { makeStyles } from '@mui/styles';
 
+import {DatePicker} from "@mui/x-date-pickers/DatePicker";
+import dayjs from "dayjs";
+import {DemoItem} from "@mui/x-date-pickers/internals/demo";
+import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
+import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-const useStyles = makeStyles(() => ({
-    root: {
-        position: "relative"
-    },
-    display: {
-        position: "absolute",
-        top: 2,
-        left: 12,
-        bottom: 2,
-        background: "white",
-        pointerEvents: "none",
-        right: 50,
-        display: "flex",
-        alignItems: "center",
-        width:"70%"
-    },
-}));
-
 const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
     const intl = useIntl();
     const [creditorConfirmPopUp, setCreditorConfirmPopUp] = React.useState(false);
@@ -72,28 +58,6 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
         }
     }, [currentUserData]);
 
-    function FormDateInputComponent({ inputRef, ...props }) {
-        const classes = useStyles();
-        return (
-            <>
-                <div className={classes.display}>
-                    {DateUtils.dateStr(fromDateValue) == "Invalid Date" ?
-                        fromDateValue
-                        :
-                        DateUtils.dateStr(fromDateValue)}
-                </div>
-                <input
-                    // className={classes.input}
-                    ref={inputRef}
-                    {...props}
-                    // onChange={handleChange}
-                    value={fromDateValue}
-                    min={minDate}
-                />
-            </>
-        );
-    }
-
     function displayErrorMsg(errorMsg) {
         return <Typography variant="errorMessage1">{errorMsg}</Typography>
     }
@@ -418,7 +382,36 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                     <Typography variant="pnspsFormParagraphBold">{FieldUtils.notNullFieldLabel("Expiry Date:")}</Typography>
                                 </Grid>
                                 <Grid item xs={12} md={6} lg={6}>
-                                    <TextField
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="brExpiryDate"
+                                                name="brExpiryDate"
+                                                onError={Boolean(formik.errors["brExpiryDate"])}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    textField: {
+                                                        helperText:formik.errors["brExpiryDate"] ? formik.errors["brExpiryDate"] : ''
+                                                    },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                // label={"Submit Date (From)"}
+                                                value={fromDate === null ? null : dayjs(fromDate)}
+                                                minDate={minDate === null ? null : dayjs(minDate)}
+                                                disabled={(!editMode && !createMode)}
+                                                onChange={(newValue) => {
+                                                    // console.log(DateUtils.dateValue(newValue))
+                                                    // console.log(DateUtils.dateValue(minDate))
+                                                    if(DateUtils.dateValue(newValue)>DateUtils.dateValue(minDate)){
+                                                        setFromDate(newValue);
+                                                    }else{
+                                                        alert("Please select a date after today.")
+                                                    }
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
+                                    {/* <TextField
                                         fullWidth
                                         id="brExpiryDate"
                                         type="date"
@@ -441,7 +434,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                         }}
                                         disabled={(!editMode && !createMode)}
                                         sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                    /> */}
                                 </Grid>
                             </Grid>
                             

src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js

@@ -2,7 +2,8 @@
 import {
     Grid, Button, Typography,
     Dialog, DialogTitle, DialogContent, DialogActions,
-    FormHelperText, TextField
+    FormHelperText, 
+    // TextField
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import * as React from "react";
@@ -21,6 +22,11 @@ import { lazy } from 'react';
 import { notifyCreateSuccess } from 'utils/CommonFunction';
 import { useIntl } from "react-intl";
 
+import {DatePicker} from "@mui/x-date-pickers/DatePicker";
+import dayjs from "dayjs";
+import {DemoItem} from "@mui/x-date-pickers/internals/demo";
+import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
+import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -32,15 +38,23 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
     const [isFailPopUp, setIsFailPopUp] = useState(false);
     const [failText, setFailText] = useState("");
     const [errorMsg, setErrorMsg] = useState("");
+    const [minDate] = React.useState(new Date());
+    const [fromDate, setFromDate] = React.useState("dd / mm / yyyy");
+    const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
 
     useEffect(() => {
         //if state data are ready and assign to different field
         // console.log(currentApplicationDetailData)
         if (Object.keys(currentUserData).length > 0) {
+            setFromDate(currentUserData.brExpiryDate)
             setOnReady(true);
         }
     }, [currentUserData]);
 
+    React.useEffect(() => {
+        setFromDateValue(fromDate);
+    }, [fromDate]);
+
     function displayErrorMsg(errorMsg) {
         return <Typography variant="errorMessage1">{errorMsg}</Typography>
     }
@@ -78,6 +92,11 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
                 if (values.country.type == "hongKong" && values.district == null) {
                     setErrorMsg(intl.formatMessage({ id: 'pleaseFillInDistrict' }))
                 } else {
+                    let sentDateFrom = "";
+                    if (fromDateValue != "dd / mm / yyyy") {
+                        sentDateFrom = DateUtils.dateValue(fromDateValue)
+                    }
+
                     HttpUtils.post({
                         url: UrlUtils.POST_ORG_SAVE_PATH,
                         params: {
@@ -86,7 +105,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
                             enCompanyName: values.enCompanyName,
                             chCompanyName: values.chCompanyName,
                             brNo: values.brNo,
-                            brExpiryDate: values.brExpiryDate,
+                            brExpiryDate: sentDateFrom,
                             enCompanyNameTemp: values.enCompanyNameTemp,
                             chCompanyNameTemp: values.chCompanyNameTemp,
                             brExpiryDateTemp: values.brExpiryDateTemp,
@@ -207,7 +226,36 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
                                         <Typography variant="pnspsFormParagraphBold">{FieldUtils.notNullFieldLabel("Expiry Date:")}</Typography>
                                     </Grid>
                                     <Grid item xs={12} md={6} lg={6}>
-                                        <TextField
+                                        <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                            <DemoItem  components={['DatePicker']}>
+                                                <DatePicker
+                                                    id="brExpiryDate"
+                                                    name="brExpiryDate"
+                                                    onError={Boolean(formik.errors["brExpiryDate"])}
+                                                    slotProps={{
+                                                        field: { readOnly: true, },
+                                                        textField: {
+                                                            helperText:formik.errors["brExpiryDate"] ? formik.errors["brExpiryDate"] : ''
+                                                        },
+                                                    }}
+                                                    format="DD/MM/YYYY"
+                                                    // label={"Submit Date (From)"}
+                                                    value={fromDate === null ? null : dayjs(fromDate)}
+                                                    minDate={minDate === null ? null : dayjs(minDate)}
+                                                    // disabled={(!editMode && !createMode)}
+                                                    onChange={(newValue) => {
+                                                        // console.log(DateUtils.dateValue(newValue))
+                                                        // console.log(DateUtils.dateValue(minDate))
+                                                        if(DateUtils.dateValue(newValue)>DateUtils.dateValue(minDate)){
+                                                            setFromDate(newValue);
+                                                        }else{
+                                                            alert("Please select a date after today.")
+                                                        }
+                                                    }}
+                                                />
+                                            </DemoItem >
+                                        </LocalizationProvider>
+                                        {/* <TextField
                                             fullWidth
                                             id="brExpiryDate"
                                             name="brExpiryDate"
@@ -220,7 +268,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
                                             sx={{
                                                 width: '100%'
                                             }}
-                                        />
+                                        /> */}
                                     </Grid>
                                 </Grid>