update datepicker

.eslintrc

@@ -63,7 +63,7 @@
     "import/no-extraneous-dependencies": "off",
     "jsx-a11y/no-autofocus": "off",
     "no-restricted-imports": [
-      "error",
+      "off",
       {
         "patterns": ["@mui/*/*/*", "!@mui/material/test-utils/*"]
       }

package-lock.json

@@ -20,7 +20,6 @@
         "@mui/material": "^5.10.6",
         "@mui/styles": "^5.15.14",
         "@mui/x-data-grid": "^6.11.1",
-        "@mui/x-date-pickers": "^6.12.0",
         "@reduxjs/toolkit": "^1.8.5",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
@@ -69,7 +68,7 @@
         "@babel/core": "^7.21.4",
         "@babel/eslint-parser": "^7.21.3",
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-        "@mui/x-date-pickers": "^6.11.0",
+        "@mui/x-date-pickers": "^6.18.0",
         "eslint": "^8.38.0",
         "eslint-config-prettier": "^8.8.0",
         "eslint-config-react-app": "^7.0.1",
@@ -2683,28 +2682,28 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
-      "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
       "dependencies": {
-        "@floating-ui/utils": "^0.1.3"
+        "@floating-ui/utils": "^0.2.1"
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
-      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+      "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
       "dependencies": {
-        "@floating-ui/core": "^1.4.2",
-        "@floating-ui/utils": "^0.1.3"
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
       }
     },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz",
-      "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
+      "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
       "dependencies": {
-        "@floating-ui/dom": "^1.5.1"
+        "@floating-ui/dom": "^1.6.1"
       },
       "peerDependencies": {
         "react": ">=16.8.0",
@@ -2712,9 +2711,9 @@
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
-      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
     },
     "node_modules/@formatjs/ecma402-abstract": {
       "version": "1.18.0",
@@ -4968,15 +4967,15 @@
       }
     },
     "node_modules/@mui/x-date-pickers": {
-      "version": "6.16.3",
-      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.16.3.tgz",
-      "integrity": "sha512-CBwXrOJ5blqkAdF0d1dWF1RMeCS6ZYDq+53Yf/r+Izqj33+SCw+wAbdrxuIxE2GL3JY5NszEx8JFnCKZIzFZuA==",
+      "version": "6.19.9",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.19.9.tgz",
+      "integrity": "sha512-B2m4Fv/fOme5qmV6zuE3QnWQSvj3zKtI2OvikPz5prpiCcIxqpeytkQ7VfrWH3/Aqd5yhG1Yr4IgbqG0ymIXGg==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.23.2",
-        "@mui/base": "^5.0.0-beta.20",
-        "@mui/utils": "^5.14.14",
-        "@types/react-transition-group": "^4.4.7",
+        "@mui/base": "^5.0.0-beta.22",
+        "@mui/utils": "^5.14.16",
+        "@types/react-transition-group": "^4.4.8",
         "clsx": "^2.0.0",
         "prop-types": "^15.8.1",
         "react-transition-group": "^4.4.5"
@@ -4993,7 +4992,7 @@
         "@emotion/styled": "^11.8.1",
         "@mui/material": "^5.8.6",
         "@mui/system": "^5.8.0",
-        "date-fns": "^2.25.0",
+        "date-fns": "^2.25.0 || ^3.2.0",
         "date-fns-jalali": "^2.13.0-0",
         "dayjs": "^1.10.7",
         "luxon": "^3.0.2",
@@ -5033,10 +5032,42 @@
         }
       }
     },
+    "node_modules/@mui/x-date-pickers/node_modules/@mui/base": {
+      "version": "5.0.0-beta.40",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
+      "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@floating-ui/react-dom": "^2.0.8",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/x-date-pickers/node_modules/clsx": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
-      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
       "dev": true,
       "engines": {
         "node": ">=6"
@@ -8562,9 +8593,9 @@
       }
     },
     "node_modules/date-fns": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.0.6.tgz",
-      "integrity": "sha512-W+G99rycpKMMF2/YD064b2lE7jJGUe+EjOES7Q8BIGY8sbNdbgcs9XFTZwvzc9Jx1f3k7LB7gZaZa7f8Agzljg==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"

package.json

@@ -16,7 +16,6 @@
     "@mui/material": "^5.10.6",
     "@mui/styles": "^5.15.14",
     "@mui/x-data-grid": "^6.11.1",
-    "@mui/x-date-pickers": "^6.12.0",
     "@reduxjs/toolkit": "^1.8.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
@@ -94,7 +93,7 @@
     "@babel/core": "^7.21.4",
     "@babel/eslint-parser": "^7.21.3",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@mui/x-date-pickers": "^6.11.0",
+    "@mui/x-date-pickers": "^6.18.0",
     "eslint": "^8.38.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-react-app": "^7.0.1",

src/pages/Announcement/Search/SearchForm.js

@@ -11,25 +11,13 @@ import * as DateUtils from "utils/DateUtils";
 import {ThemeProvider} from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
-import { makeStyles } from '@mui/styles';
-// ==============================|| 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"
-    },
-  }));
 
+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 SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
     const navigate = useNavigate()
 
@@ -47,50 +35,6 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
     React.useEffect(() => {
         setToDateValue(maxDate);
     }, [maxDate]);
-    
-    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}
-                max= {maxDate}
-            />
-            </>
-        );
-    }
-
-    function ToDateInputComponent({inputRef, ...props }) {
-        const classes = useStyles();
-        return (
-            <>
-            <div className={classes.display}>
-                {DateUtils.dateStr(toDateValue)=="Invalid Date"?
-                    toDateValue
-                :
-                    DateUtils.dateStr(toDateValue)}
-            </div>
-            <input
-                // className={classes.input}
-                ref={inputRef}
-                {...props}
-                // onChange={handleChange}
-                value={toDateValue}
-                min = {minDate}
-            />
-            </>
-        );
-    }
 
     const marginBottom = 2.5;
     const { reset, register, handleSubmit } = useForm()
@@ -151,49 +95,57 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
                         <Grid item xs={12} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:marginBottom}}>
                             <Grid container spacing={1}>
                                 <Grid item xs={6}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("dateFrom")}
-                                        id="dateFrom"
-                                        type="date"
-                                        label={"Submit Date (From)"}
-                                        defaultValue={searchCriteria.dateFrom}
-                                        InputProps={{
-                                            inputComponent: FormDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            if(newValue.target.value!=""){
-                                                setMinDate(newValue.target.value);
-                                            }
-                                        }}
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="dateFrom"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    // textField: {
+                                                    //     helperText: receiptFromErrorMessage,
+                                                    // },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                label={"Submit Date (From)"}
+                                                value={minDate === null ? null : dayjs(minDate)}
+                                                maxDate={maxDate === null ? null : dayjs(maxDate)}
+                                                onChange={(newValue) => {
+                                                    // console.log(newValue)
+                                                    if(newValue!=null){
+                                                        setMinDate(newValue);
+                                                    }
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
 
                                 <Grid item xs={6}>
-                                    <TextField
-                                        fullWidth
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        {...register("dateTo")}
-                                        InputProps={{
-                                            inputComponent: ToDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            if(newValue.target.value!=""){
-                                                setMaxDate(newValue.target.value);
-                                            }
-                                        }}
-                                        id="dateTo"
-                                        type="date"
-                                        label={"Submit Date (To)"}
-                                        defaultValue={searchCriteria.dateTo}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="dateTo"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    // textField: {
+                                                    //     helperText: receiptFromErrorMessage,
+                                                    // },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                label={"Submit Date (To)"}
+                                                value={maxDate === null ? null : dayjs(maxDate)}
+                                                minDate={minDate === null ? null : dayjs(minDate)}
+                                                onChange={(newValue) => {
+                                                    // console.log(newValue)
+                                                    if(newValue!=null){
+                                                        setMaxDate(newValue);
+                                                    }
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
                             </Grid>
                         </Grid>

src/pages/Announcement/Search_Public/SearchForm.js

@@ -12,25 +12,13 @@ import { ThemeProvider } from "@emotion/react";
 // import { useNavigate } from "react-router-dom";
 import { PNSPS_BUTTON_THEME } from "../../../themes/buttonConst";
 import { FormattedMessage, useIntl } from "react-intl";
-import { makeStyles } from '@mui/styles';
-// ==============================|| 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"
-    },
-  }));
 
+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 SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
     // const navigate = useNavigate()
 
@@ -50,50 +38,6 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
     React.useEffect(() => {
         setToDateValue(maxDate);
     }, [maxDate]);
-    
-    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}
-                max= {maxDate}
-            />
-            </>
-        );
-    }
-
-    function ToDateInputComponent({inputRef, ...props }) {
-        const classes = useStyles();
-        return (
-            <>
-            <div className={classes.display}>
-                {DateUtils.dateStr(toDateValue)=="Invalid Date"?
-                    toDateValue
-                :
-                    DateUtils.dateStr(toDateValue)}
-            </div>
-            <input
-                // className={classes.input}
-                ref={inputRef}
-                {...props}
-                // onChange={handleChange}
-                value={toDateValue}
-                min = {minDate}
-            />
-            </>
-        );
-    }
 
     const marginBottom = 2.5;
     const { reset, register, handleSubmit } = useForm()
@@ -150,56 +94,65 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             />
                         </Grid>
 
-                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
+                        <Grid item xs={12} s={6} md={6} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
                             <Grid container>
                                 <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("dateFrom")}
-                                        id="dateFrom"
-                                        type="date"
-                                        label={intl.formatMessage({ id: 'dateFrom' }) + ":"}
-                                        defaultValue={searchCriteria.dateFrom}
-                                        InputProps={{
-                                            inputComponent: FormDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            if(newValue.target.value!=""){
-                                                setMinDate(newValue.target.value);
-                                            }
-                                        }}
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="dateFrom"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    // textField: {
+                                                    //     helperText: receiptFromErrorMessage,
+                                                    // },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                aria-label={intl.formatMessage({id: 'dateFrom'})}
+                                                label={intl.formatMessage({id: 'dateFrom'})}
+                                                value={minDate === null ? null : dayjs(minDate)}
+                                                maxDate={maxDate === null ? null : dayjs(maxDate)}
+                                                onChange={(newValue) => {
+                                                    // console.log(newValue)
+                                                    if(newValue!=null){
+                                                        setMinDate(newValue);
+                                                    }
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
 
-                                <Grid item xs={1.5} s={1.5} md={1.5} lg={1} sx={{ mt: 0.8, display: 'flex', justifyContent: "center", alignItems: 'flex-start' }}>
-                                    <FormattedMessage id="to"></FormattedMessage>
+                                <Grid item xs={1.5} s={1.5} md={1.5} lg={1} sx={{mt:1.3, display: 'flex', justifyContent:"center", alignItems: 'flex-start'}}>
+                                    <FormattedMessage id="to" />
                                 </Grid>
 
                                 <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
-                                    <TextField
-                                        fullWidth
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        {...register("dateTo")}
-                                        InputProps={{
-                                            inputComponent: ToDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            if(newValue.target.value!=""){
-                                                setMaxDate(newValue.target.value);
-                                            }
-                                        }}
-                                        id="dateTo"
-                                        type="date"
-                                        //label={"Submit Date(To)"}
-                                        defaultValue={searchCriteria.dateTo}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="dateTo"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    // textField: {
+                                                    //     helperText: receiptFromErrorMessage,
+                                                    // },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                aria-label={intl.formatMessage({id: 'dateTo'})}
+                                                value={maxDate === null ? null : dayjs(maxDate)}
+                                                minDate={minDate === null ? null : dayjs(minDate)}
+                                                onChange={(newValue) => {
+                                                    // console.log(newValue)
+                                                    if(newValue!=null){
+                                                        setMaxDate(newValue);
+                                                    }
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
                             </Grid>
                         </Grid>

src/pages/AuditLog/AuditLogSearchForm.js

@@ -22,29 +22,14 @@ import * as DateUtils from "utils/DateUtils";
 import * as UrlUtils from "utils/ApiPathConst";
 import * as HttpUtils from "utils/HttpUtils";
 import Loadable from 'components/Loadable';
-
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
-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 AuditLogSearchForm = ({ applySearch, searchCriteria}) => {
     // const navigate = useNavigate();
 
@@ -66,51 +51,6 @@ const AuditLogSearchForm = ({ applySearch, searchCriteria}) => {
         setToDateValue(maxDate);
     }, [maxDate]);
 
-    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}
-                    max={maxDate}
-                />
-            </>
-        );
-    }
-
-    function ToDateInputComponent({ inputRef, ...props }) {
-        const classes = useStyles();
-        // console.log(minDate)
-        return (
-            <>
-                <div className={classes.display}>
-                    {DateUtils.dateStr(toDateValue) == "Invalid Date" ?
-                        toDateValue
-                        :
-                        DateUtils.dateStr(toDateValue)}
-                </div>
-                <input
-                    // className={classes.input}
-                    ref={inputRef}
-                    {...props}
-                    // onChange={handleChange}
-                    value={toDateValue}
-                    min={minDate}
-                />
-            </>
-        );
-    }
-
     const onSubmit = (data) => {
         let sentDateFrom = "";
         let sentDateTo = "";
@@ -177,27 +117,31 @@ const AuditLogSearchForm = ({ applySearch, searchCriteria}) => {
 
                     <Grid item xs={9} s={6} md={6} lg={6} sx={{ml:3, mr:3, mb:marginBottom}}>
                         <Grid container>
-                            <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
-                                <TextField
-                                    fullWidth
-                                    {...register("modifiedFrom")}
-                                    id="modifiedFrom"
-                                    type="date"
-                                    label="Modified From"
-                                    defaultValue={searchCriteria.modifiedFrom}
-                                    InputProps={{
-                                        inputComponent: FormDateInputComponent,
-                                    }}
-                                    onChange={(newValue) => {
-                                        if(newValue.target.value!=""){
-                                                setMinDate(newValue.target.value);
-                                            }
-                                    }}
-                                    InputLabelProps={{
-                                        shrink: true
-                                    }}
-                                    sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                />
+                            <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>                          
+                                <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                    <DemoItem  components={['DatePicker']}>
+                                        <DatePicker
+                                            id="modifiedFrom"
+                                            // onError={(newError) => setReceiptFromError(newError)}
+                                            slotProps={{
+                                                field: { readOnly: true, },
+                                                // textField: {
+                                                //     helperText: receiptFromErrorMessage,
+                                                // },
+                                            }}
+                                            format="DD/MM/YYYY"
+                                            label="Modified From"
+                                            value={minDate === null ? null : dayjs(minDate)}
+                                            maxDate={maxDate === null ? null : dayjs(maxDate)}
+                                            onChange={(newValue) => {
+                                                // console.log(newValue)
+                                                if(newValue!=null){
+                                                    setMinDate(newValue);
+                                                }
+                                            }}
+                                        />
+                                    </DemoItem >
+                                </LocalizationProvider>
                             </Grid>
 
                             <Grid item xs={1.5} s={1.5} md={1.5} lg={1} sx={{mt:0.8, display: 'flex', justifyContent:"center", alignItems: 'flex-start'}}>
@@ -205,26 +149,30 @@ const AuditLogSearchForm = ({ applySearch, searchCriteria}) => {
                             </Grid>
 
                             <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
-                                <TextField
-                                    fullWidth
-                                    InputLabelProps={{
-                                        shrink: true
-                                    }}
-                                    {...register("modifiedTo")}
-                                    InputProps={{
-                                        inputComponent: ToDateInputComponent,
-                                    }}
-                                    onChange={(newValue) => {
-                                        if(newValue.target.value!=""){
-                                            setMaxDate(newValue.target.value);
-                                        }
-                                    }}
-                                    id="modifiedTo"
-                                    type="date"
-                                    label="Modified To"
-                                    defaultValue={searchCriteria.modifiedTo}
-                                    sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                />
+                                <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                    <DemoItem  components={['DatePicker']}>
+                                        <DatePicker
+                                            id="modifiedTo"
+                                            // onError={(newError) => setReceiptFromError(newError)}
+                                            slotProps={{
+                                                field: { readOnly: true, },
+                                                // textField: {
+                                                //     helperText: receiptFromErrorMessage,
+                                                // },
+                                            }}
+                                            format="DD/MM/YYYY"
+                                            label="Modified To"
+                                            value={maxDate === null ? null : dayjs(maxDate)}
+                                            minDate={minDate === null ? null : dayjs(minDate)}
+                                            onChange={(newValue) => {
+                                                // console.log(newValue)
+                                                if(newValue!=null){
+                                                    setMaxDate(newValue);
+                                                }
+                                            }}
+                                        />
+                                    </DemoItem >
+                                </LocalizationProvider>
                             </Grid>
                         </Grid>
                     </Grid>

src/pages/DemandNote/Search/SearchForm.js

@@ -14,27 +14,13 @@ import * as FormatUtils from "utils/FormatUtils";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 import { useIntl } from "react-intl";
-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 SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issueComboData
 }) => {
 
@@ -47,13 +33,13 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
 
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
-    const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
-    const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy");
+    const [fromDateValue, setFromDateValue] = React.useState(searchCriteria.dateFrom);
+    const [toDateValue, setToDateValue] = React.useState(searchCriteria.dateTo);
     
-    const [minDueDate, setMinDueDate] = React.useState(searchCriteria.dueDateFrom);
-    const [maxDueDate, setMaxDueDate] = React.useState(searchCriteria.dueDateTo);
-    const [fromDueDateValue, setFromDueDateValue] = React.useState("dd / mm / yyyy");
-    const [toDueDateValue, setToDueDateValue] = React.useState("dd / mm / yyyy");
+    const [minDueDate, setMinDueDate] = React.useState(null);
+    const [maxDueDate, setMaxDueDate] = React.useState(null);
+    const [fromDueDateValue, setFromDueDateValue] = React.useState(null);
+    const [toDueDateValue, setToDueDateValue] = React.useState(null);
 
     const intl = useIntl();
     const { locale } = intl;
@@ -67,103 +53,13 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
     }, [maxDate]);
 
     React.useEffect(() => {
-        setFromDueDateValue(minDueDate??"dd / mm / yyyy");
+        setFromDueDateValue(minDueDate);
     }, [minDueDate]);
 
     React.useEffect(() => {
-        setToDueDateValue(maxDueDate??"dd / mm / yyyy");
+        setToDueDateValue(maxDueDate);
     }, [maxDueDate]);
 
-    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}
-                    max={maxDate}
-                />
-            </>
-        );
-    }
-
-    function ToDateInputComponent({ inputRef, ...props }) {
-        const classes = useStyles();
-        console.log(minDate)
-        return (
-            <>
-                <div className={classes.display}>
-                    {DateUtils.dateStr(toDateValue) == "Invalid Date" ?
-                        toDateValue
-                        :
-                        DateUtils.dateStr(toDateValue)}
-                </div>
-                <input
-                    // className={classes.input}
-                    ref={inputRef}
-                    {...props}
-                    // onChange={handleChange}
-                    value={toDateValue}
-                    min={minDate}
-                />
-            </>
-        );
-    }
-
-    function FormDueDateInputComponent({ inputRef, ...props }) {
-        const classes = useStyles();
-        return (
-            <>
-                <div className={classes.display}>
-                    {DateUtils.dateStr(fromDueDateValue) == "Invalid Date" ?
-                        fromDueDateValue
-                        :
-                        DateUtils.dateStr(fromDueDateValue)}
-                </div>
-                <input
-                    // className={classes.input}
-                    ref={inputRef}
-                    {...props}
-                    // onChange={handleChange}
-                    value={fromDueDateValue}
-                    max={maxDueDate}
-                />
-            </>
-        );
-    }
-
-    function ToDueDateInputComponent({ inputRef, ...props }) {
-        const classes = useStyles();
-        return (
-            <>
-                <div className={classes.display}>
-                    {DateUtils.dateStr(toDueDateValue) == "Invalid Date" ?
-                        toDueDateValue
-                        :
-                        DateUtils.dateStr(toDueDateValue)}
-                </div>
-                <input
-                    // className={classes.input}
-                    ref={inputRef}
-                    {...props}
-                    // onChange={handleChange}
-                    value={toDueDateValue}
-                    min={minDueDate}
-                />
-            </>
-        );
-    }
-
-
     const { reset, register, handleSubmit } = useForm()
     const onSubmit = (data) => {
         data.status = selectedStatus?.type;
@@ -219,8 +115,10 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
         setOrgSelected({});
         setIssueSelected({});
         setSelectedStatus(ComboData.denmandNoteStatus[0]);
-        setFromDueDateValue("dd / mm / yyyy");
-        setToDueDateValue("dd / mm / yyyy");
+        setMinDueDate(null);
+        setMaxDueDate(null);
+        setMinDate(searchCriteria.dateFrom);
+        setMaxDate(searchCriteria.dateTo);
         reset();
     }
 
@@ -352,96 +250,114 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                         <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
                             <Grid container spacing={1}>
                                 <Grid item xs={6}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("dateFrom")}
-                                        id="dateFrom"
-                                        type="date"
-                                        label={"Issue Date (From)"}
-                                        defaultValue={searchCriteria.dateFrom}
-                                        InputProps={{
-                                            inputComponent: FormDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            if(newValue.target.value!=""){
-                                                setMinDate(newValue.target.value);
-                                            }
-                                        }}
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="dateFrom"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    // textField: {
+                                                    //     helperText: receiptFromErrorMessage,
+                                                    // },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                label={"Issue Date (From)"}
+                                                value={minDate === null ? null : dayjs(minDate)}
+                                                maxDate={maxDate === null ? null : dayjs(maxDate)}
+                                                onChange={(newValue) => {
+                                                    // console.log(newValue)
+                                                    if(newValue!=null){
+                                                        setMinDate(newValue);
+                                                    }
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
 
-                                <Grid item xs={6}>
-                                    <TextField
-                                        fullWidth
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        {...register("dateTo")}
-                                        InputProps={{
-                                            inputComponent: ToDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            if(newValue.target.value!=""){
-                                                setMaxDate(newValue.target.value);
-                                            }
-                                        }}
-                                        id="dateTo"
-                                        type="date"
-                                        label={"Issue Date (To)"}
-                                        defaultValue={searchCriteria.dateTo}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                <Grid item xs={6}>           
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="dateTo"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    // textField: {
+                                                    //     helperText: receiptFromErrorMessage,
+                                                    // },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                label={"Issue Date (To)"}
+                                                value={maxDate === null ? null : dayjs(maxDate)}
+                                                minDate={minDate === null ? null : dayjs(minDate)}
+                                                onChange={(newValue) => {
+                                                    // console.log(newValue)
+                                                    if(newValue!=null){
+                                                        setMaxDate(newValue);
+                                                    }
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
                             </Grid>
                         </Grid>
 
-                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                        <Grid item xs={9} s={6} md={6} lg={3.5} sx={{ml:3, mr:2, mb:3}}>
                             <Grid container spacing={1}>
                                 <Grid item xs={6}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("dueDateFrom")}
-                                        id="dueDateFrom"
-                                        type="date"
-                                        label={"Due Date (From)"}
-                                        defaultValue={searchCriteria.dueDateFrom}
-                                        InputProps={{
-                                            inputComponent: FormDueDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            setMinDueDate(newValue.target.value);
-                                        }}
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="dueDateFrom"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    textField: {
+                                                        // helperText: receiptFromErrorMessage,
+                                                        InputLabelProps: { shrink: true }
+                                                    },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                label={"Due Date (From)"}
+                                                value={minDueDate === null ? null : dayjs(minDueDate)}
+                                                maxDate={maxDueDate === null ? null : dayjs(maxDueDate)}
+                                                onChange={(newValue) => {
+                                                    // console.log(newValue)
+                                                    setMinDueDate(newValue);
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
 
                               
-                                <Grid item xs={6}>
-                                    <TextField
-                                        fullWidth
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        {...register("dueDateTo")}
-                                        InputProps={{
-                                            inputComponent: ToDueDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            setMaxDueDate(newValue.target.value);
-                                        }}
-                                        id="dueDateTo"
-                                        type="date"
-                                        label={"Due Date (To)"}
-                                        defaultValue={searchCriteria.dueDateTo}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                <Grid item xs={6}>                                    
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="dueDateTo"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    textField: {
+                                                        // helperText: receiptFromErrorMessage,
+                                                        InputLabelProps: { shrink: true }
+                                                    },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                label={"Due Date (To)"}
+                                                value={maxDueDate === null ? null : dayjs(maxDueDate)}
+                                                minDate={minDueDate === null ? null : dayjs(minDueDate)}
+                                                onChange={(newValue) => {
+                                                    // console.log(newValue)
+                                                    setMaxDueDate(newValue);
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
                             </Grid>
                         </Grid>

src/pages/DemandNote/Search_Public/SearchForm.js

@@ -15,26 +15,13 @@ import * as FormatUtils from "utils/FormatUtils";
 import { FormattedMessage, 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"
-    },
-}));
-
 const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
 }) => {
 
@@ -59,50 +46,6 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
         setToDateValue(maxDate);
     }, [maxDate]);
 
-    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}
-                    max={maxDate}
-                />
-            </>
-        );
-    }
-
-    function ToDateInputComponent({ inputRef, ...props }) {
-        const classes = useStyles();
-        return (
-            <>
-                <div className={classes.display}>
-                    {DateUtils.dateStr(toDateValue) == "Invalid Date" ?
-                        toDateValue
-                        :
-                        DateUtils.dateStr(toDateValue)}
-                </div>
-                <input
-                    // className={classes.input}
-                    ref={inputRef}
-                    {...props}
-                    // onChange={handleChange}
-                    value={toDateValue}
-                    min={minDate}
-                />
-            </>
-        );
-    }
-
     const { reset, register, handleSubmit } = useForm()
     const onSubmit = (data) => {
         let typeArray = [];
@@ -244,48 +187,57 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                         </Grid>
 
                         <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                            <TextField
-                                fullWidth
-                                {...register("dateFrom")}
-                                id="dateFrom"
-                                type="date"
-                                label={intl.formatMessage({ id: 'sendDateFrom' })}
-                                defaultValue={searchCriteria.dateFrom}
-                                // InputProps={{ inputProps: { max: maxDate } }}
-                                InputProps={{
-                                    inputComponent: FormDateInputComponent,
-                                }}
-                                onChange={(newValue) => {
-                                    if(newValue.target.value!=""){
-                                                setMinDate(newValue.target.value);
+                            <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                <DemoItem  components={['DatePicker']}>
+                                    <DatePicker
+                                        id="dateFrom"
+                                        // onError={(newError) => setReceiptFromError(newError)}
+                                        slotProps={{
+                                            field: { readOnly: true, },
+                                            // textField: {
+                                            //     helperText: receiptFromErrorMessage,
+                                            // },
+                                        }}
+                                        format="DD/MM/YYYY"
+                                        label={intl.formatMessage({ id: 'sendDateFrom' })}
+                                        value={minDate === null ? null : dayjs(minDate)}
+                                        maxDate={maxDate === null ? null : dayjs(maxDate)}
+                                        onChange={(newValue) => {
+                                            // console.log(newValue)
+                                            if(newValue!=null){
+                                                setMinDate(newValue);
                                             }
-                                }}
-                                InputLabelProps={{
-                                    shrink: true
-                                }}
-                            />
+                                        }}
+                                    />
+                                </DemoItem >
+                            </LocalizationProvider>
                         </Grid>
 
-                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                            <TextField
-                                fullWidth
-                                InputLabelProps={{
-                                    shrink: true
-                                }}
-                                {...register("dateTo")}
-                                InputProps={{
-                                    inputComponent: ToDateInputComponent,
-                                }}
-                                onChange={(newValue) => {
-                                    if(newValue.target.value!=""){
-                                        setMaxDate(newValue.target.value);
-                                    }
-                                }}
-                                id="dateTo"
-                                type="date"
-                                label={intl.formatMessage({ id: 'sendDateTo' })}
-                                defaultValue={searchCriteria.dateTo}
-                            />
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>     
+                            <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                <DemoItem  components={['DatePicker']}>
+                                    <DatePicker
+                                        id="dateTo"
+                                        // onError={(newError) => setReceiptFromError(newError)}
+                                        slotProps={{
+                                            field: { readOnly: true, },
+                                            // textField: {
+                                            //     helperText: receiptFromErrorMessage,
+                                            // },
+                                        }}
+                                        format="DD/MM/YYYY"
+                                        label={intl.formatMessage({ id: 'sendDateTo' })}
+                                        value={maxDate === null ? null : dayjs(maxDate)}
+                                        minDate={minDate === null ? null : dayjs(minDate)}
+                                        onChange={(newValue) => {
+                                            // console.log(newValue)
+                                            if(newValue!=null){
+                                                setMaxDate(newValue);
+                                            }
+                                        }}
+                                    />
+                                </DemoItem >
+                            </LocalizationProvider>
                         </Grid>
 
 

src/pages/GFMIS/SearchForm.js

@@ -1,7 +1,8 @@
 // material-ui
 import {
     Button,
-    Grid, TextField,
+    Grid, 
+    // TextField,
     // Autocomplete,
     Typography
 } from '@mui/material';
@@ -13,27 +14,13 @@ import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 // import * as ComboData from "utils/ComboData";
 import * as DateUtils from "utils/DateUtils";
-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 SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria }) => {
 
     // const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
@@ -42,34 +29,15 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria }) =>
     // const [status, setStatus] = React.useState(ComboData.paymentStatus[0]);
     const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
 
-    const { register, handleSubmit, } = useForm()
+    const { 
+        // register, 
+        handleSubmit, 
+    } = useForm()
 
     React.useEffect(() => {
         setFromDateValue(minDate);
     }, [minDate]);
 
-    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}
-                    max={maxDate}
-                />
-            </>
-        );
-    }
-
     const onSubmit = () => {
         let sentDateFrom = "";
 
@@ -122,71 +90,77 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria }) =>
                     {/*row 2*/}
 
                     <Grid container display="flex" alignItems={"center"}>
-                    <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        <TextField
-                            fullWidth
-                            {...register("dateFrom")}
-                            id="dateFrom"
-                            type="date"
-                            label="Credit Date"
-                            defaultValue={searchCriteria.dateFrom}
-                            InputProps={{
-                                inputComponent: FormDateInputComponent,
-                            }}
-                            onChange={(newValue) => {
-                                if(newValue.target.value!=""){
-                                                setMinDate(newValue.target.value);
+                        <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                                                    
+                            <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                <DemoItem  components={['DatePicker']}>
+                                    <DatePicker
+                                        id="dateFrom"
+                                        // onError={(newError) => setReceiptFromError(newError)}
+                                        slotProps={{
+                                            field: { readOnly: true, },
+                                            // textField: {
+                                            //     helperText: receiptFromErrorMessage,
+                                            // },
+                                        }}
+                                        format="DD/MM/YYYY"
+                                        label="Credit Date"
+                                        value={minDate === null ? null : dayjs(minDate)}
+                                        maxDate={maxDate === null ? null : dayjs(maxDate)}
+                                        onChange={(newValue) => {
+                                            // console.log(newValue)
+                                            if(newValue!=null){
+                                                setMinDate(newValue);
                                             }
-                            }}
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                            sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                        />
+                                        }}
+                                    />
+                                </DemoItem >
+                            </LocalizationProvider>
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            {/* <TextField
+                                fullWidth
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                                {...register("dateTo")}
+                                InputProps={{ inputProps: { min: minDate } }}
+                                onChange={(newValue) => {
+                                    setMaxDate(DateUtils.dateValue(newValue));
+                                }}
+                                id="dateTo"
+                                type="date"
+                                label="To"
+                                defaultValue={searchCriteria.dateTo}
+                            /> */}
+                        </Grid>
+
+                        {/* <Grid item xs={9} s={6} md={4} lg={3}>
+                        </Grid> */}
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        {/* <TextField
-                            fullWidth
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                            {...register("dateTo")}
-                            InputProps={{ inputProps: { min: minDate } }}
-                            onChange={(newValue) => {
-                                setMaxDate(DateUtils.dateValue(newValue));
-                            }}
-                            id="dateTo"
-                            type="date"
-                            label="To"
-                            defaultValue={searchCriteria.dateTo}
-                        /> */}
+                    <Grid container justifyContent="flex-end" direction="row"  alignItems="center" spacing={3} sx={{ ml: 3, mr: 3, mb: 3, }}>
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Grid item  >
+                            <Button
+                                variant="contained"
+                                type="submit"
+                            >
+                                Preview
+                            </Button>
+                        </Grid>
+
+                        <Grid item  >
+                            <Button
+                                variant="contained"
+                                onClick={generateHandler}
+                            >
+                                Generate
+                            </Button>
+                        </Grid>
+                        </ThemeProvider>
                     </Grid>
-
-                    {/* <Grid item xs={9} s={6} md={4} lg={3}>
-                    </Grid> */}
-                </Grid>
-                <Grid container justifyContent="flex-end" direction="row"  alignItems="center" spacing={3} sx={{ ml: 3, mr: 3, mb: 3, }}>
-                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
-                    <Grid item  >
-                        <Button
-                            variant="contained"
-                            type="submit"
-                        >
-                            Preview
-                        </Button>
-                    </Grid>
-
-                    <Grid item  >
-                        <Button
-                            variant="contained"
-                            onClick={generateHandler}
-                        >
-                            Generate
-                        </Button>
-                    </Grid>
-                    </ThemeProvider>
-                </Grid>
                 </Grid>
             </form>
         </MainCard>

src/pages/Message/Search/SearchForm.js

@@ -12,6 +12,12 @@ import * as DateUtils from "utils/DateUtils";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 import {FormattedMessage, 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 ||============================== //
 
 
@@ -20,6 +26,17 @@ const SearchForm = ({ applySearch, searchCriteria }) => {
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
 
+    const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
+    const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy");
+
+    React.useEffect(() => {
+        setFromDateValue(minDate);
+    }, [minDate]);
+
+    React.useEffect(() => {
+        setToDateValue(maxDate);
+    }, [maxDate]);
+
     const _sx = {
         padding: "4 2 4 2",
         boxShadow: 1,
@@ -39,15 +56,24 @@ const SearchForm = ({ applySearch, searchCriteria }) => {
     const { reset, register, handleSubmit } = useForm()
 
     const onSubmit = (data) => {
+        let sentDateFrom = "";
+        let sentDateTo = "";
+
+        if (fromDateValue != "dd / mm / yyyy" && toDateValue != "dd / mm / yyyy") {
+            sentDateFrom = DateUtils.dateValue(fromDateValue)
+            sentDateTo = DateUtils.dateValue(toDateValue)
+        }
         const temp = {
             keywork: data.keywork,
-            dateFrom: data.dateFrom,
-            dateTo: data.dateTo,
+            dateFrom: sentDateFrom,
+            dateTo: sentDateTo,
         };
         applySearch(temp);
     };
 
     function resetForm() {
+        setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
+        setMaxDate(DateUtils.dateValue(new Date()))
         reset();
     }
 
@@ -86,25 +112,34 @@ const SearchForm = ({ applySearch, searchCriteria }) => {
                         />
                     </Grid>
 
-                    <Grid item xs={12} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                    <Grid item xs={12} s={6} md={6} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <Grid container>
                             <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
-                                <TextField
-                                    fullWidth
-                                    {...register("dateFrom")}
-                                    id="dateFrom"
-                                    type="date"
-                                    aria-label={intl.formatMessage({id: 'dateFrom'})}
-                                    label={intl.formatMessage({id: 'dateFrom'})}
-                                    defaultValue={searchCriteria.dateFrom}
-                                    InputProps={{ inputProps: { max: maxDate } }}
-                                    onChange={(newValue) => {
-                                        setMinDate(DateUtils.dateValue(newValue));
-                                    }}
-                                    InputLabelProps={{
-                                        shrink: true
-                                    }}
-                                />
+                                <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                    <DemoItem  components={['DatePicker']}>
+                                        <DatePicker
+                                            id="dateFrom"
+                                            // onError={(newError) => setReceiptFromError(newError)}
+                                            slotProps={{
+                                                field: { readOnly: true, },
+                                                // textField: {
+                                                //     helperText: receiptFromErrorMessage,
+                                                // },
+                                            }}
+                                            format="DD/MM/YYYY"
+                                            aria-label={intl.formatMessage({id: 'dateFrom'})}
+                                            label={intl.formatMessage({id: 'dateFrom'})}
+                                            value={minDate === null ? null : dayjs(minDate)}
+                                            maxDate={maxDate === null ? null : dayjs(maxDate)}
+                                            onChange={(newValue) => {
+                                                // console.log(newValue)
+                                                if(newValue!=null){
+                                                    setMinDate(newValue);
+                                                }
+                                            }}
+                                        />
+                                    </DemoItem >
+                                </LocalizationProvider>
                             </Grid>
 
                             <Grid item xs={1.5} s={1.5} md={1.5} lg={1} sx={{mt:1.3, display: 'flex', justifyContent:"center", alignItems: 'flex-start'}}>
@@ -112,22 +147,30 @@ const SearchForm = ({ applySearch, searchCriteria }) => {
                             </Grid>
 
                             <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
-                                <TextField
-                                    fullWidth
-                                    InputLabelProps={{
-                                        shrink: true
-                                    }}
-                                    {...register("dateTo")}
-                                    InputProps={{ inputProps: { min: minDate } }}
-                                    onChange={(newValue) => {
-                                        setMaxDate(DateUtils.dateValue(newValue));
-                                    }}
-                                    aria-label={intl.formatMessage({id: 'dateTo'})}
-                                    id="dateTo"
-                                    type="date"
-                                    //label="付款日期(到)"
-                                    defaultValue={searchCriteria.dateTo}
-                                />
+                                <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                    <DemoItem  components={['DatePicker']}>
+                                        <DatePicker
+                                            id="dateTo"
+                                            // onError={(newError) => setReceiptFromError(newError)}
+                                            slotProps={{
+                                                field: { readOnly: true, },
+                                                // textField: {
+                                                //     helperText: receiptFromErrorMessage,
+                                                // },
+                                            }}
+                                            format="DD/MM/YYYY"
+                                            aria-label={intl.formatMessage({id: 'dateTo'})}
+                                            value={maxDate === null ? null : dayjs(maxDate)}
+                                            minDate={minDate === null ? null : dayjs(minDate)}
+                                            onChange={(newValue) => {
+                                                // console.log(newValue)
+                                                if(newValue!=null){
+                                                    setMaxDate(newValue);
+                                                }
+                                            }}
+                                        />
+                                    </DemoItem >
+                                </LocalizationProvider>
                             </Grid>
                         </Grid>
                     </Grid>

src/pages/Payment/Search_GLD/SearchForm.js

@@ -12,27 +12,13 @@ import * as DateUtils from "utils/DateUtils";
 import * as ComboData from "utils/ComboData";
 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 SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
 
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
@@ -53,49 +39,6 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
         setToDateValue(maxDate);
     }, [maxDate]);
 
-    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}
-                    max={maxDate}
-                />
-            </>
-        );
-    }
-
-    function ToDateInputComponent({ inputRef, ...props }) {
-        const classes = useStyles();
-        return (
-            <>
-                <div className={classes.display}>
-                    {DateUtils.dateStr(toDateValue) == "Invalid Date" ?
-                        toDateValue
-                        :
-                        DateUtils.dateStr(toDateValue)}
-                </div>
-                <input
-                    // className={classes.input}
-                    ref={inputRef}
-                    {...props}
-                    // onChange={handleChange}
-                    value={toDateValue}
-                    min={minDate}
-                />
-            </>
-        );
-    }
     const onSubmit = (data) => {
         let sentDateFrom = "";
         let sentDateTo = "";
@@ -156,48 +99,56 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                         <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:marginBottom}}>
                             <Grid container spacing={1}>
                                 <Grid item xs={6}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("dateFrom")}
-                                        id="dateFrom"
-                                        type="date"
-                                        label="Transaction Date (From)"
-                                        defaultValue={searchCriteria.dateFrom}
-                                        InputProps={{
-                                            inputComponent: FormDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            if(newValue.target.value!=""){
-                                                setMinDate(newValue.target.value);
-                                            }
-                                        }}
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="dateFrom"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    // textField: {
+                                                    //     helperText: receiptFromErrorMessage,
+                                                    // },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                label="Transaction Date (From)"
+                                                value={minDate === null ? null : dayjs(minDate)}
+                                                maxDate={maxDate === null ? null : dayjs(maxDate)}
+                                                onChange={(newValue) => {
+                                                    // console.log(newValue)
+                                                    if(newValue!=null){
+                                                        setMinDate(newValue);
+                                                    }
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
                                 <Grid item xs={6}>
-                                    <TextField
-                                        fullWidth
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        {...register("dateTo")}
-                                        InputProps={{
-                                            inputComponent: ToDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            if(newValue.target.value!=""){
-                                                setMaxDate(newValue.target.value);
-                                            }
-                                        }}
-                                        id="dateTo"
-                                        type="date"
-                                        label="Transaction Date (To)"
-                                        defaultValue={searchCriteria.dateTo}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="dateTo"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    // textField: {
+                                                    //     helperText: receiptFromErrorMessage,
+                                                    // },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                label="Transaction Date (To)"
+                                                value={maxDate === null ? null : dayjs(maxDate)}
+                                                minDate={minDate === null ? null : dayjs(minDate)}
+                                                onChange={(newValue) => {
+                                                    // console.log(newValue)
+                                                    if(newValue!=null){
+                                                        setMaxDate(newValue);
+                                                    }
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
                             </Grid>
                         </Grid>

src/pages/Payment/Search_Public/SearchForm.js

@@ -14,25 +14,13 @@ import * as ComboData from "utils/ComboData";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 import {FormattedMessage, useIntl} from "react-intl";
-import { makeStyles } from '@mui/styles';
-// ==============================|| 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"
-    },
-  }));
 
+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 SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
     const intl = useIntl();
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
@@ -51,50 +39,6 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
         setToDateValue(maxDate);
     }, [maxDate]);
 
-    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}
-                max= {maxDate}
-            />
-            </>
-        );
-    }
-
-    function ToDateInputComponent({inputRef, ...props }) {
-        const classes = useStyles();
-        return (
-            <>
-            <div className={classes.display}>
-                {DateUtils.dateStr(toDateValue)=="Invalid Date"?
-                    toDateValue
-                :
-                    DateUtils.dateStr(toDateValue)}
-            </div>
-            <input
-                // className={classes.input}
-                ref={inputRef}
-                {...props}
-                // onChange={handleChange}
-                value={toDateValue}
-                min = {minDate}
-            />
-            </>
-        );
-    }
-
     const _sx = {
         padding: "4 2 4 2",
         boxShadow: 1,
@@ -173,49 +117,59 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                     <Grid item xs={12} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <Grid container spacing={1}>
                             <Grid item xs={6}>
-                                <TextField
-                                    fullWidth
-                                    {...register("dateFrom")}
-                                    id="dateFrom"
-                                    type="date"
-                                    label={intl.formatMessage({id: 'payDateFrom'})}
-                                    defaultValue={searchCriteria.dateFrom}
-                                    InputProps={{
-                                        inputComponent: FormDateInputComponent,
-                                    }}
-                                    onChange={(newValue) => {
-                                        if(newValue.target.value!=""){
-                                            setMinDate(newValue.target.value);
-                                        }
-                                    }}
-                                    InputLabelProps={{
-                                        shrink: true
-                                    }}
-                                    sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                />
+                                <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                    <DemoItem  components={['DatePicker']}>
+                                        <DatePicker
+                                            id="dateFrom"
+                                            // onError={(newError) => setReceiptFromError(newError)}
+                                            slotProps={{
+                                                field: { readOnly: true, },
+                                                // textField: {
+                                                //     helperText: receiptFromErrorMessage,
+                                                // },
+                                            }}
+                                            format="DD/MM/YYYY"
+                                            label={intl.formatMessage({id: 'payDateFrom'})}
+                                            // defaultValue={searchCriteria.dateFrom}
+                                            value={minDate === null ? null : dayjs(minDate)}
+                                            maxDate={maxDate === null ? null : dayjs(maxDate)}
+                                            onChange={(newValue) => {
+                                                // console.log(newValue)
+                                                if(newValue!=null){
+                                                    setMinDate(newValue);
+                                                }
+                                            }}
+                                        />
+                                    </DemoItem >
+                                </LocalizationProvider>
                             </Grid>
 
                             <Grid item xs={6}>
-                                <TextField
-                                    fullWidth
-                                    InputLabelProps={{
-                                        shrink: true
-                                    }}
-                                    {...register("dateTo")}
-                                    InputProps={{
-                                        inputComponent: ToDateInputComponent,
-                                    }}
-                                    onChange={(newValue) => {
-                                        if(newValue.target.value!=""){
-                                            setMaxDate(newValue.target.value);
-                                        }
-                                    }}
-                                    id="dateTo"
-                                    type="date"
-                                    label={intl.formatMessage({id: 'payDateTo'})}
-                                    defaultValue={searchCriteria.dateTo}
-                                    sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                />
+                                <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                    <DemoItem  components={['DatePicker']}>
+                                        <DatePicker
+                                            id="dateTo"
+                                            // onError={(newError) => setReceiptFromError(newError)}
+                                            slotProps={{
+                                                field: { readOnly: true, },
+                                                // textField: {
+                                                //     helperText: receiptFromErrorMessage,
+                                                // },
+                                            }}
+                                            format="DD/MM/YYYY"
+                                            label={intl.formatMessage({id: 'payDateTo'})}
+                                            // defaultValue={searchCriteria.dateTo}
+                                            value={maxDate === null ? null : dayjs(maxDate)}
+                                            minDate={minDate === null ? null : dayjs(minDate)}
+                                            onChange={(newValue) => {
+                                                // console.log(newValue)
+                                                if(newValue!=null){
+                                                    setMaxDate(newValue);
+                                                }
+                                            }}
+                                        />
+                                    </DemoItem >
+                                </LocalizationProvider>
                             </Grid>
                         </Grid>
                     </Grid>

src/pages/Proof/Search_GLD/SearchForm.js

@@ -14,27 +14,13 @@ import { Typography } from '../../../../node_modules/@mui/material/index';
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 import { useIntl } from "react-intl";
-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 SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, issueComboData
 }) => {
 
@@ -59,50 +45,6 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
         setToDateValue(maxDate);
     }, [maxDate]);
 
-    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}
-                    max={maxDate}
-                />
-            </>
-        );
-    }
-
-    function ToDateInputComponent({ inputRef, ...props }) {
-        const classes = useStyles();
-        return (
-            <>
-                <div className={classes.display}>
-                    {DateUtils.dateStr(toDateValue) == "Invalid Date" ?
-                        toDateValue
-                        :
-                        DateUtils.dateStr(toDateValue)}
-                </div>
-                <input
-                    // className={classes.input}
-                    ref={inputRef}
-                    {...props}
-                    // onChange={handleChange}
-                    value={toDateValue}
-                    min={minDate}
-                />
-            </>
-        );
-    }
-
     const intl = useIntl();
     const { locale } = intl;
 
@@ -281,49 +223,57 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                         <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:marginBottom}}>
                             <Grid container spacing={1}>
                                 <Grid item xs={6}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("dateFrom")}
-                                        id="dateFrom"
-                                        type="date"
-                                        label="Proof Issue Date (From)"
-                                        defaultValue={searchCriteria.dateFrom}
-                                        InputProps={{
-                                            inputComponent: FormDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            if(newValue.target.value!=""){
-                                                setMinDate(newValue.target.value);
-                                            }
-                                        }}
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="dateFrom"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    // textField: {
+                                                    //     helperText: receiptFromErrorMessage,
+                                                    // },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                label="Proof Issue Date (From)"
+                                                value={minDate === null ? null : dayjs(minDate)}
+                                                maxDate={maxDate === null ? null : dayjs(maxDate)}
+                                                onChange={(newValue) => {
+                                                    // console.log(newValue)
+                                                    if(newValue!=null){
+                                                        setMinDate(newValue);
+                                                    }
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
                                
-                                <Grid item xs={6}>
-                                    <TextField
-                                        fullWidth
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        {...register("dateTo")}
-                                        InputProps={{
-                                            inputComponent: ToDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            if(newValue.target.value!=""){
-                                                setMaxDate(newValue.target.value);
-                                            }
-                                        }}
-                                        id="dateTo"
-                                        type="date"
-                                        label="Proof Issue Date (To)"
-                                        defaultValue={searchCriteria.dateTo}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />    
+                                <Grid item xs={6}>         
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="dateTo"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    // textField: {
+                                                    //     helperText: receiptFromErrorMessage,
+                                                    // },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                label="Proof Issue Date (To)"
+                                                value={maxDate === null ? null : dayjs(maxDate)}
+                                                minDate={minDate === null ? null : dayjs(minDate)}
+                                                onChange={(newValue) => {
+                                                    // console.log(newValue)
+                                                    if(newValue!=null){
+                                                        setMaxDate(newValue);
+                                                    }
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
                             </Grid>
                         </Grid>

src/pages/Proof/Search_Public/SearchForm.js

@@ -15,25 +15,13 @@ import * as FormatUtils from "utils/FormatUtils";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 import {FormattedMessage, useIntl} from "react-intl";
-import { makeStyles } from '@mui/styles';
-// ==============================|| 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"
-    },
-}));
 
+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 SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
 }) => {
     const intl = useIntl();
@@ -58,50 +46,6 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
         setToDateValue(maxDate);
     }, [maxDate]);
 
-    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}
-                    max={maxDate}
-                />
-            </>
-        );
-    }
-
-    function ToDateInputComponent({ inputRef, ...props }) {
-        const classes = useStyles();
-        return (
-            <>
-                <div className={classes.display}>
-                    {DateUtils.dateStr(toDateValue) == "Invalid Date" ?
-                        toDateValue
-                        :
-                        DateUtils.dateStr(toDateValue)}
-                </div>
-                <input
-                    // className={classes.input}
-                    ref={inputRef}
-                    {...props}
-                    // onChange={handleChange}
-                    value={toDateValue}
-                    min={minDate}
-                />
-            </>
-        );
-    }
-
     const _sx = {
         padding: "4 2 4 2",
         boxShadow: 1,
@@ -185,7 +129,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
             + " Vol. " + FormatUtils.zeroPad(volume, 3)
             + ", No. " + FormatUtils.zeroPad(issueNo, 2)
             + ", " + DateUtils.dateFormat(issueDate, "D MMM YYYY (ddd)");
-    }
+    } 
 
     return (
         <MainCard xs={12} md={12} lg={12}
@@ -281,49 +225,57 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                     <Grid item xs={12} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <Grid container spacing={1}>
                             <Grid item xs={6}>
-                                <TextField
-                                    fullWidth
-                                    {...register("dateFrom")}
-                                    id="dateFrom"
-                                    type="date"
-                                    label={intl.formatMessage({id: 'proofDateFrom'})}
-                                    defaultValue={searchCriteria.dateFrom}
-                                    InputProps={{
-                                        inputComponent: FormDateInputComponent,
-                                    }}
-                                    onChange={(newValue) => {
-                                        if(newValue.target.value!=""){
-                                                setMinDate(newValue.target.value);
-                                            }
-                                    }}
-                                    InputLabelProps={{
-                                        shrink: true
-                                    }}
-                                    sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                />
+                                <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                    <DemoItem  components={['DatePicker']}>
+                                        <DatePicker
+                                            id="dateFrom"
+                                            // onError={(newError) => setReceiptFromError(newError)}
+                                            slotProps={{
+                                                field: { readOnly: true, },
+                                                // textField: {
+                                                //     helperText: receiptFromErrorMessage,
+                                                // },
+                                            }}
+                                            format="DD/MM/YYYY"
+                                            label={intl.formatMessage({id: 'proofDateFrom'})}
+                                            value={minDate === null ? null : dayjs(minDate)}
+                                            maxDate={maxDate === null ? null : dayjs(maxDate)}
+                                            onChange={(newValue) => {
+                                                // console.log(newValue)
+                                                if(newValue!=null){
+                                                    setMinDate(newValue);
+                                                }
+                                            }}
+                                        />
+                                    </DemoItem >
+                                </LocalizationProvider>
                             </Grid>
 
                             <Grid item xs={6}>
-                                <TextField
-                                    fullWidth
-                                    InputLabelProps={{
-                                        shrink: true
-                                    }}
-                                    {...register("dateTo")}
-                                    InputProps={{
-                                        inputComponent: ToDateInputComponent,
-                                    }}
-                                    onChange={(newValue) => {
-                                        if(newValue.target.value!=""){
-                                            setMaxDate(newValue.target.value);
-                                        }
-                                    }}
-                                    id="dateTo"
-                                    type="date"
-                                    label={intl.formatMessage({id: 'proofDateTo'})}
-                                    defaultValue={searchCriteria.dateTo}
-                                    sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                />
+                                <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                    <DemoItem  components={['DatePicker']}>
+                                        <DatePicker
+                                            id="dateTo"
+                                            // onError={(newError) => setReceiptFromError(newError)}
+                                            slotProps={{
+                                                field: { readOnly: true, },
+                                                // textField: {
+                                                //     helperText: receiptFromErrorMessage,
+                                                // },
+                                            }}
+                                            format="DD/MM/YYYY"
+                                            label={intl.formatMessage({id: 'proofDateTo'})}
+                                            value={maxDate === null ? null : dayjs(maxDate)}
+                                            minDate={minDate === null ? null : dayjs(minDate)}
+                                            onChange={(newValue) => {
+                                                // console.log(newValue)
+                                                if(newValue!=null){
+                                                    setMaxDate(newValue);
+                                                }
+                                            }}
+                                        />
+                                    </DemoItem >
+                                </LocalizationProvider>
                             </Grid>
                         </Grid>
                     </Grid>

src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js

@@ -16,27 +16,14 @@ import {
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 import {FormattedMessage, useIntl} from "react-intl";
-import { makeStyles } from '@mui/styles';
 
-// ==============================|| 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%"
-    },
-}));
+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 SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
     const intl = useIntl();
     const [type, setType] = React.useState([]);
@@ -59,50 +46,6 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
         setToDateValue(maxDate);
     }, [maxDate]);
 
-    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}
-                    max={maxDate}
-                />
-            </>
-        );
-    }
-
-    function ToDateInputComponent({ inputRef, ...props }) {
-        const classes = useStyles();
-        return (
-            <>
-                <div className={classes.display}>
-                    {DateUtils.dateStr(toDateValue) == "Invalid Date" ?
-                        toDateValue
-                        :
-                        DateUtils.dateStr(toDateValue)}
-                </div>
-                <input
-                    // className={classes.input}
-                    ref={inputRef}
-                    {...props}
-                    // onChange={handleChange}
-                    value={toDateValue}
-                    min={minDate}
-                />
-            </>
-        );
-    }
-
     const onSubmit = (data) => {
         data.status = status.type;
         let typeArray = [];
@@ -166,53 +109,58 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                     </Grid>
 
                     <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        <TextField
-                            fullWidth
-                            {...register("dateFrom")}
-                            id="dateFrom"
-                            type="date"
-                            format="DD/MM/YYYY"
-                            aria-label={intl.formatMessage({id: 'submitDateFrom'})}
-                            label={intl.formatMessage({id: 'submitDateFrom'})}
-                            defaultValue={searchCriteria.dateFrom}
-                            InputProps={{
-                                inputComponent: FormDateInputComponent,
-                            }}
-                            onChange={(newValue) => {
-                                if(newValue.target.value!=""){
-                                                setMinDate(newValue.target.value);
-                                            }
-                            }}
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                            sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                        />
+                        <LocalizationProvider dateAdapter={AdapterDayjs}>
+                            <DemoItem  components={['DatePicker']}>
+                                <DatePicker
+                                    id="dateFrom"
+                                    // onError={(newError) => setReceiptFromError(newError)}
+                                    slotProps={{
+                                        field: { readOnly: true, },
+                                        // textField: {
+                                        //     helperText: receiptFromErrorMessage,
+                                        // },
+                                    }}
+                                    format="DD/MM/YYYY"
+                                    aria-label={intl.formatMessage({id: 'submitDateFrom'})}
+                                    label={intl.formatMessage({id: 'submitDateFrom'})}
+                                    value={minDate === null ? null : dayjs(minDate)}
+                                    maxDate={maxDate === null ? null : dayjs(maxDate)}
+                                    onChange={(newValue) => {
+                                        // console.log(newValue)
+                                        if(newValue!=null){
+                                            setMinDate(newValue);
+                                        }
+                                    }}
+                                />
+                            </DemoItem >
+                        </LocalizationProvider>
                     </Grid>
-
+                    
                     <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        <TextField
-                            fullWidth
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                            {...register("dateTo")}
-                            id="dateTo"
-                            type="date"
-                            // format="DD/MM/YYYY"
-                            aria-label={intl.formatMessage({id: 'submitDateTo'})}
-                            label={intl.formatMessage({id: 'submitDateTo'})}
-                            defaultValue={searchCriteria.dateTo}
-                            InputProps={{
-                                inputComponent: ToDateInputComponent,
-                            }}
-                            onChange={(newValue) => {
-                                if(newValue.target.value!=""){
-                                    setMaxDate(newValue.target.value);
-                                }
-                            }}
-                            sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                        />
+                        <LocalizationProvider dateAdapter={AdapterDayjs}>
+                            <DemoItem  components={['DatePicker']}>
+                                <DatePicker
+                                    id="dateTo"
+                                    // onError={(newError) => setReceiptFromError(newError)}
+                                    slotProps={{
+                                        field: { readOnly: true, },
+                                        // textField: {
+                                        //     helperText: receiptFromErrorMessage,
+                                        // },
+                                    }}
+                                    format="DD/MM/YYYY"
+                                    label={intl.formatMessage({id: 'submitDateTo'})}
+                                    value={maxDate === null ? null : dayjs(maxDate)}
+                                    minDate={minDate === null ? null : dayjs(minDate)}
+                                    onChange={(newValue) => {
+                                        // console.log(newValue)
+                                        if(newValue!=null){
+                                            setMaxDate(newValue);
+                                        }
+                                    }}
+                                />
+                            </DemoItem >
+                        </LocalizationProvider>
                     </Grid>
                     {isORGLoggedIn()?
                         <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>

src/pages/PublicNotice/Search_GLD/SearchForm.js

@@ -14,27 +14,13 @@ import * as FormatUtils from "utils/FormatUtils";
 import { ThemeProvider } from "@emotion/react";
 import { PNSPS_BUTTON_THEME } from "../../../themes/buttonConst";
 import { useIntl } from "react-intl";
-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 SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, issueComboData
 }) => {
 
@@ -59,50 +45,6 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
         setToDateValue(maxDate);
     }, [maxDate]);
 
-    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}
-                    max={maxDate}
-                />
-            </>
-        );
-    }
-
-    function ToDateInputComponent({ inputRef, ...props }) {
-        const classes = useStyles();
-        return (
-            <>
-                <div className={classes.display}>
-                    {DateUtils.dateStr(toDateValue) == "Invalid Date" ?
-                        toDateValue
-                        :
-                        DateUtils.dateStr(toDateValue)}
-                </div>
-                <input
-                    // className={classes.input}
-                    ref={inputRef}
-                    {...props}
-                    // onChange={handleChange}
-                    value={toDateValue}
-                    min={minDate}
-                />
-            </>
-        );
-    }
-
     const intl = useIntl();
     const { locale } = intl;
 
@@ -216,49 +158,57 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                         <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
                             <Grid container spacing={1}>
                                 <Grid item xs={6}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("dateFrom")}
-                                        id="dateFrom"
-                                        type="date"
-                                        label={"Submit Date (From)"}
-                                        defaultValue={searchCriteria.dateFrom}
-                                        InputProps={{
-                                            inputComponent: FormDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            if(newValue.target.value!=""){
-                                                setMinDate(newValue.target.value);
-                                            }
-                                        }}
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="dateFrom"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    // textField: {
+                                                    //     helperText: receiptFromErrorMessage,
+                                                    // },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                label={"Submit Date (From)"}
+                                                value={minDate === null ? null : dayjs(minDate)}
+                                                maxDate={maxDate === null ? null : dayjs(maxDate)}
+                                                onChange={(newValue) => {
+                                                    // console.log(newValue)
+                                                    if(newValue!=null){
+                                                        setMinDate(newValue);
+                                                    }
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
                                 
                                 <Grid item xs={6}>
-                                    <TextField
-                                        fullWidth
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        {...register("dateTo")}
-                                        InputProps={{
-                                            inputComponent: ToDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            if(newValue.target.value!=""){
-                                                setMaxDate(newValue.target.value);
-                                            }
-                                        }}
-                                        id="dateTo"
-                                        type="date"
-                                        label={"Submit Date (To)"}
-                                        defaultValue={searchCriteria.dateTo}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="dateTo"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    // textField: {
+                                                    //     helperText: receiptFromErrorMessage,
+                                                    // },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                label={"Submit Date (To)"}
+                                                value={maxDate === null ? null : dayjs(maxDate)}
+                                                minDate={minDate === null ? null : dayjs(minDate)}
+                                                onChange={(newValue) => {
+                                                    // console.log(newValue)
+                                                    if(newValue!=null){
+                                                        setMaxDate(newValue);
+                                                    }
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
                             </Grid>
                         </Grid>

src/pages/Recon/SearchForm.js

@@ -15,42 +15,28 @@ import * as ComboData from "utils/ComboData";
 import * as DateUtils from "utils/DateUtils";
 import Loadable from 'components/Loadable';
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
-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 SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, onLoad }) => {
-
-    const [sysTxnMinDate, setSysTxnMinDate] = React.useState(searchCriteria.dateFrom);
-    const [sysTxnMaxDate, setsysTxnMaxDate] = React.useState(searchCriteria.dateTo);
-    const [txnMinDate, setTxnMinDate] = React.useState(searchCriteria.dateFrom);
-    const [txnMaxDate, setTxnMaxDate] = React.useState(searchCriteria.dateTo);
-    const [collMinDate, setCollMinDate] = React.useState(searchCriteria.dateFrom);
-    const [collMaxDate, setCollMaxDate] = React.useState(searchCriteria.dateTo);
-
-    const [sysTxnFromDateValue, setSysTxnFromDateValue] = React.useState("dd / mm / yyyy");
-    const [sysTxnToDateValue, setSysTxnToDateValue] = React.useState("dd / mm / yyyy");
-    const [txnFromDateValue, setTxnFromDateValue] = React.useState("dd / mm / yyyy");
-    const [txnToDateValue, setTxnToDateValue] = React.useState("dd / mm / yyyy");
-    const [collFromDateValue, setCollFromDateValue] = React.useState("dd / mm / yyyy");
-    const [collToDateValue, setCollToDateValue] = React.useState("dd / mm / yyyy");
+const SearchPublicNoticeForm = ({ applySearch, generateReport, onLoad }) => {
+
+    const [sysTxnMinDate, setSysTxnMinDate] = React.useState(null);
+    const [sysTxnMaxDate, setsysTxnMaxDate] = React.useState(null);
+    const [txnMinDate, setTxnMinDate] = React.useState(null);
+    const [txnMaxDate, setTxnMaxDate] = React.useState(null);
+    const [collMinDate, setCollMinDate] = React.useState(null);
+    const [collMaxDate, setCollMaxDate] = React.useState(null);
+
+    const [sysTxnFromDateValue, setSysTxnFromDateValue] = React.useState(null);
+    const [sysTxnToDateValue, setSysTxnToDateValue] = React.useState(null);
+    const [txnFromDateValue, setTxnFromDateValue] = React.useState(null);
+    const [txnToDateValue, setTxnToDateValue] = React.useState(null);
+    const [collFromDateValue, setCollFromDateValue] = React.useState(null);
+    const [collToDateValue, setCollToDateValue] = React.useState(null);
     
     const [status, setStatus] = React.useState(ComboData.paymentStatus[0]);
     const [method, setMethod] = React.useState(ComboData.paymentMethod[0]);
@@ -82,138 +68,6 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
         setCollToDateValue(collMaxDate);
     }, [collMaxDate]);
 
-    function SysTxnFormDateInputComponent({ inputRef, ...props }) {
-        const classes = useStyles();
-        return (
-            <>
-                <div className={classes.display}>
-                    {DateUtils.dateStr(sysTxnFromDateValue) == "Invalid Date" ?
-                        sysTxnFromDateValue
-                        :
-                        DateUtils.dateStr(sysTxnFromDateValue)}
-                </div>
-                <input 
-                    className={classes.input}
-                    ref={inputRef}
-                    {...props}
-                    // onChange={handleChange}
-                    value={sysTxnFromDateValue}
-                    max={sysTxnMaxDate}
-                />
-            </>
-        );
-    }
-
-    function SysTxnToDateInputComponent({ inputRef, ...props }) {
-        const classes = useStyles();
-        return (
-            <>
-                <div className={classes.display}>
-                    {DateUtils.dateStr(sysTxnToDateValue) == "Invalid Date" ?
-                        sysTxnToDateValue
-                        :
-                        DateUtils.dateStr(sysTxnToDateValue)}
-                </div>
-                <input
-                    // className={classes.input}
-                    ref={inputRef}
-                    {...props}
-                    // onChange={handleChange}
-                    value={sysTxnToDateValue}
-                    min={sysTxnMinDate}
-                />
-            </>
-        );
-    }
-
-    function TxnFormDateInputComponent({ inputRef, ...props }) {
-        const classes = useStyles();
-        return (
-            <>
-                <div className={classes.display}>
-                    {DateUtils.dateStr(txnFromDateValue) == "Invalid Date" ?
-                        txnFromDateValue
-                        :
-                        DateUtils.dateStr(txnFromDateValue)}
-                </div>
-                <input 
-                    className={classes.input}
-                    ref={inputRef}
-                    {...props}
-                    // onChange={handleChange}
-                    value={txnFromDateValue}
-                    max={txnMaxDate}
-                />
-            </>
-        );
-    }
-
-    function TxnToDateInputComponent({ inputRef, ...props }) {
-        const classes = useStyles();
-        return (
-            <>
-                <div className={classes.display}>
-                    {DateUtils.dateStr(txnToDateValue) == "Invalid Date" ?
-                        txnToDateValue
-                        :
-                        DateUtils.dateStr(txnToDateValue)}
-                </div>
-                <input
-                    // className={classes.input}
-                    ref={inputRef}
-                    {...props}
-                    // onChange={handleChange}
-                    value={txnToDateValue}
-                    min={txnMinDate}
-                />
-            </>
-        );
-    }
-
-    function CollFormDateInputComponent({ inputRef, ...props }) {
-        const classes = useStyles();
-        return (
-            <>
-                <div className={classes.display}>
-                    {DateUtils.dateStr(collFromDateValue) == "Invalid Date" ?
-                        collFromDateValue
-                        :
-                        DateUtils.dateStr(collFromDateValue)}
-                </div>
-                <input 
-                    className={classes.input}
-                    ref={inputRef}
-                    {...props}
-                    // onChange={handleChange}
-                    value={collFromDateValue}
-                    max={collMaxDate}
-                />
-            </>
-        );
-    }
-
-    function CollToDateInputComponent({ inputRef, ...props }) {
-        const classes = useStyles();
-        return (
-            <>
-                <div className={classes.display}>
-                    {DateUtils.dateStr(collToDateValue) == "Invalid Date" ?
-                        collToDateValue
-                        :
-                        DateUtils.dateStr(collToDateValue)}
-                </div>
-                <input
-                    // className={classes.input}
-                    ref={inputRef}
-                    {...props}
-                    // onChange={handleChange}
-                    value={collToDateValue}
-                    min={collMinDate}
-                />
-            </>
-        );
-    }
-
     const onSubmit = () => {
 
         let sentSysTxnDateFrom = "";
@@ -287,12 +141,12 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
     }
 
     const clearHandler = () => () => {
-        setSysTxnMinDate(searchCriteria.dateFrom)
-        setsysTxnMaxDate(searchCriteria.dateTo)
-        setTxnMinDate(searchCriteria.dateFrom)
-        setTxnMaxDate(searchCriteria.dateTo)
-        setCollMinDate(searchCriteria.dateFrom)
-        setCollMaxDate(searchCriteria.dateTo)
+        setSysTxnMinDate(null)
+        setsysTxnMaxDate(null)
+        setTxnMinDate(null)
+        setTxnMaxDate(null)
+        setCollMinDate(null)
+        setCollMaxDate(null)
         setSysTxnFromDateValue("")
         setSysTxnToDateValue("")
         setTxnFromDateValue("")
@@ -382,45 +236,54 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                     <Grid container display="flex" alignItems={"center"}>
                         <Grid item xs={12} s={12} md={12} lg={12} sx={{ml:3, mr:3, mb:marginBottom}}>
                             <Grid container spacing={1}>
-                                <Grid item xs={4}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("sysTxnDateFrom")}
-                                        id="sysTxnDateFrom"
-                                        type="date"
-                                        label="PNSPS Transaction Date (From)"
-                                        ////defaultValue={searchCriteria.dateFrom}
-                                        InputProps={{
-                                            inputComponent: SysTxnFormDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            setSysTxnMinDate(newValue.target.value);
-                                        }}
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                <Grid item xs={4}>                       
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="sysTxnDateFrom"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    textField: {
+                                                        // helperText: receiptFromErrorMessage,
+                                                        InputLabelProps: { shrink: true }
+                                                    },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                label="PNSPS Transaction Date (From)"
+                                                value={sysTxnMinDate === null ? null : dayjs(sysTxnMinDate)}
+                                                maxDate={sysTxnMaxDate === null ? null : dayjs(sysTxnMaxDate)}
+                                                onChange={(newValue) => {
+                                                    setSysTxnMinDate(newValue);
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
                                 <Grid item xs={4}>
-                                    <TextField
-                                        fullWidth
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        {...register("sysTxnDateTo")}
-                                        InputProps={{
-                                            inputComponent: SysTxnToDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            setsysTxnMaxDate(newValue.target.value);
-                                        }}
-                                        id="sysTxnDateTo"
-                                        type="date"
-                                        label="PNSPS Transaction Date (To)"
-                                        ////defaultValue={searchCriteria.dateTo}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="sysTxnDateTo"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    textField: {
+                                                        // helperText: receiptFromErrorMessage,
+                                                        InputLabelProps: { shrink: true }
+                                                    },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                label="PNSPS Transaction Date (To)"
+                                                value={sysTxnMaxDate === null ? null : dayjs(sysTxnMaxDate)}
+                                                minDate={sysTxnMinDate === null ? null : dayjs(sysTxnMinDate)}
+                                                onChange={(newValue) => {
+                                                    // console.log(newValue)
+                                                    setsysTxnMaxDate(newValue);
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
                             </Grid>
                         </Grid>
@@ -430,45 +293,55 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                     <Grid container display="flex" alignItems={"center"}>
                         <Grid item xs={12} s={12} md={12} lg={12} sx={{ml:3, mr:3, mb:marginBottom}}>
                             <Grid container spacing={1}>
-                                <Grid item xs={4}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("txnDateFrom")}
-                                        id="txnDateFrom"
-                                        type="date"
-                                        label="FI Transaction Date (From)"
-                                        //defaultValue={searchCriteria.dateFrom}
-                                        InputProps={{
-                                            inputComponent: TxnFormDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            setTxnMinDate(newValue.target.value);
-                                        }}
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                <Grid item xs={4}>                       
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="txnDateFrom"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    textField: {
+                                                        // helperText: receiptFromErrorMessage,
+                                                        InputLabelProps: { shrink: true }
+                                                    },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                label="FI Transaction Date (From)"
+                                                value={txnMinDate === null ? null : dayjs(txnMinDate)}
+                                                maxDate={txnMaxDate === null ? null : dayjs(txnMaxDate)}
+                                                onChange={(newValue) => {
+                                                    // console.log(newValue)
+                                                    setTxnMinDate(newValue);
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
                                 <Grid item xs={4}>
-                                    <TextField
-                                        fullWidth
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        {...register("txnDateTo")}
-                                        InputProps={{
-                                            inputComponent: TxnToDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            setTxnMaxDate(newValue.target.value);
-                                        }}
-                                        id="txnDateTo"
-                                        type="date"
-                                        label="FI Transaction Date (To)"
-                                        //defaultValue={searchCriteria.dateTo}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="txnDateTo"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    textField: {
+                                                        // helperText: receiptFromErrorMessage,
+                                                        InputLabelProps: { shrink: true }
+                                                    },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                label="FI Transaction Date (To)"
+                                                value={txnMaxDate === null ? null : dayjs(txnMaxDate)}
+                                                minDate={txnMinDate === null ? null : dayjs(txnMinDate)}
+                                                onChange={(newValue) => {
+                                                    // console.log(newValue)
+                                                    setTxnMaxDate(newValue);
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
                             </Grid>
                         </Grid>
@@ -478,45 +351,55 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                     <Grid container display="flex" alignItems={"center"}>
                         <Grid item xs={12} s={12} md={12} lg={12} sx={{ml:3, mr:3, mb:marginBottom}}>
                             <Grid container spacing={1}>
-                                <Grid item xs={4}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("collDateFrom")}
-                                        id="collDateFrom"
-                                        type="date"
-                                        label="Bank Credit Date (From)"
-                                        //defaultValue={searchCriteria.dateFrom}
-                                        InputProps={{
-                                            inputComponent: CollFormDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            setCollMinDate(newValue.target.value);
-                                        }}
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                <Grid item xs={4}>                       
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="collDateFrom"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    textField: {
+                                                        // helperText: receiptFromErrorMessage,
+                                                        InputLabelProps: { shrink: true }
+                                                    },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                label="Bank Credit Date (From)"
+                                                value={collMinDate === null ? null : dayjs(collMinDate)}
+                                                maxDate={collMaxDate === null ? null : dayjs(collMaxDate)}
+                                                onChange={(newValue) => {
+                                                    // console.log(newValue)
+                                                    setCollMinDate(newValue);
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
                                 <Grid item xs={4}>
-                                    <TextField
-                                        fullWidth
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                        {...register("collDateTo")}
-                                        InputProps={{
-                                            inputComponent: CollToDateInputComponent,
-                                        }}
-                                        onChange={(newValue) => {
-                                            setCollMaxDate(newValue.target.value);
-                                        }}
-                                        id="collDateTo"
-                                        type="date"
-                                        label="Bank Credit Date (To)"
-                                        //defaultValue={searchCriteria.dateTo}
-                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
-                                    />
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="collDateTo"
+                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    textField: {
+                                                        // helperText: receiptFromErrorMessage,
+                                                        InputLabelProps: { shrink: true }
+                                                    },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                label="Bank Credit Date (To)"
+                                                value={collMaxDate === null ? null : dayjs(collMaxDate)}
+                                                minDate={collMinDate === null ? null : dayjs(collMinDate)}
+                                                onChange={(newValue) => {
+                                                    // console.log(newValue)
+                                                    setCollMaxDate(newValue);
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
                                 </Grid>
                             </Grid>
                         </Grid>

yarn.lock

@@ -1480,32 +1480,32 @@
   resolved "https://registry.npmjs.org/@eslint/js/-/js-8.52.0.tgz"
   integrity sha512-mjZVbpaeMZludF2fsWLD0Z9gCref1Tk4i9+wddjRvpUNqqcndPkBD09N/Mapey0b3jaXbLm2kICwFv2E64QinA==
 
-"@floating-ui/core@^1.4.2":
-  version "1.5.0"
-  resolved "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz"
-  integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==
+"@floating-ui/core@^1.0.0":
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz"
+  integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==
   dependencies:
-    "@floating-ui/utils" "^0.1.3"
+    "@floating-ui/utils" "^0.2.1"
 
-"@floating-ui/dom@^1.5.1":
-  version "1.5.3"
-  resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz"
-  integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
+"@floating-ui/dom@^1.6.1":
+  version "1.6.3"
+  resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz"
+  integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==
   dependencies:
-    "@floating-ui/core" "^1.4.2"
-    "@floating-ui/utils" "^0.1.3"
+    "@floating-ui/core" "^1.0.0"
+    "@floating-ui/utils" "^0.2.0"
 
-"@floating-ui/react-dom@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz"
-  integrity sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==
+"@floating-ui/react-dom@^2.0.2", "@floating-ui/react-dom@^2.0.8":
+  version "2.0.8"
+  resolved "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz"
+  integrity sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==
   dependencies:
-    "@floating-ui/dom" "^1.5.1"
+    "@floating-ui/dom" "^1.6.1"
 
-"@floating-ui/utils@^0.1.3":
-  version "0.1.6"
-  resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz"
-  integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
+"@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz"
+  integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
 
 "@formatjs/[email protected]":
   version "1.18.0"
@@ -2027,7 +2027,7 @@
     hey-listen "^1.0.8"
     tslib "^2.3.1"
 
-"@mui/base@^5.0.0-alpha.87", "@mui/base@^5.0.0-beta.20", "@mui/base@5.0.0-beta.20":
+"@mui/base@^5.0.0-alpha.87", "@mui/[email protected]":
   version "5.0.0-beta.20"
   resolved "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.20.tgz"
   integrity sha512-CS2pUuqxST7ch9VNDCklRYDbJ3rru20Tx7na92QvVVKfu3RL4z/QLuVIc8jYGsdCnauMaeUSlFNLAJNb0yXe6w==
@@ -2040,6 +2040,19 @@
     clsx "^2.0.0"
     prop-types "^15.8.1"
 
+"@mui/base@^5.0.0-beta.22":
+  version "5.0.0-beta.40"
+  resolved "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz"
+  integrity sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@floating-ui/react-dom" "^2.0.8"
+    "@mui/types" "^7.2.14"
+    "@mui/utils" "^5.15.14"
+    "@popperjs/core" "^2.11.8"
+    clsx "^2.1.0"
+    prop-types "^15.8.1"
+
 "@mui/core-downloads-tracker@^5.14.14":
   version "5.14.14"
   resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.14.tgz"
@@ -2145,7 +2158,7 @@
   resolved "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz"
   integrity sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==
 
-"@mui/utils@^5.14.13", "@mui/utils@^5.14.14", "@mui/utils@^5.14.3", "@mui/utils@^5.15.14":
+"@mui/utils@^5.14.13", "@mui/utils@^5.14.14", "@mui/utils@^5.14.16", "@mui/utils@^5.14.3", "@mui/utils@^5.15.14":
   version "5.15.14"
   resolved "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz"
   integrity sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==
@@ -2166,15 +2179,15 @@
     prop-types "^15.8.1"
     reselect "^4.1.8"
 
-"@mui/x-date-pickers@^6.11.0":
-  version "6.16.3"
-  resolved "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.16.3.tgz"
-  integrity sha512-CBwXrOJ5blqkAdF0d1dWF1RMeCS6ZYDq+53Yf/r+Izqj33+SCw+wAbdrxuIxE2GL3JY5NszEx8JFnCKZIzFZuA==
+"@mui/x-date-pickers@^6.18.0":
+  version "6.19.9"
+  resolved "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.19.9.tgz"
+  integrity sha512-B2m4Fv/fOme5qmV6zuE3QnWQSvj3zKtI2OvikPz5prpiCcIxqpeytkQ7VfrWH3/Aqd5yhG1Yr4IgbqG0ymIXGg==
   dependencies:
     "@babel/runtime" "^7.23.2"
-    "@mui/base" "^5.0.0-beta.20"
-    "@mui/utils" "^5.14.14"
-    "@types/react-transition-group" "^4.4.7"
+    "@mui/base" "^5.0.0-beta.22"
+    "@mui/utils" "^5.14.16"
+    "@types/react-transition-group" "^4.4.8"
     clsx "^2.0.0"
     prop-types "^15.8.1"
     react-transition-group "^4.4.5"
@@ -2737,7 +2750,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@^4.2.0", "@types/react-transition-group@^4.4.6", "@types/react-transition-group@^4.4.7":
+"@types/react-transition-group@^4.2.0", "@types/react-transition-group@^4.4.6", "@types/react-transition-group@^4.4.7", "@types/react-transition-group@^4.4.8":
   version "4.4.8"
   resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.8.tgz"
   integrity sha512-QmQ22q+Pb+HQSn04NL3HtrqHwYMf4h3QKArOy5F8U5nEVMaihBs3SR10WiOM1iwPz5jIo8x/u11al+iEGZZrvg==
@@ -4464,10 +4477,10 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-date-fns@^2.25.0, date-fns@^3.0.6:
-  version "3.0.6"
-  resolved "https://registry.npmjs.org/date-fns/-/date-fns-3.0.6.tgz"
-  integrity sha512-W+G99rycpKMMF2/YD064b2lE7jJGUe+EjOES7Q8BIGY8sbNdbgcs9XFTZwvzc9Jx1f3k7LB7gZaZa7f8Agzljg==
+"date-fns@^2.25.0 || ^3.2.0", date-fns@^3.0.6:
+  version "3.6.0"
+  resolved "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz"
+  integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
 
 dayjs@^1.10.7, dayjs@^1.11.9:
   version "1.11.10"