fix date picker in chrome

src/pages/Announcement/Search/SearchForm.js

@@ -84,6 +84,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
                                         InputLabelProps={{
                                             shrink: true
                                         }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                     />
                                 </Grid>
 
@@ -102,6 +103,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
                                         type="date"
                                         label={"Submit Date (To)"}
                                         defaultValue={searchCriteria.dateTo}
+                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                     />
                                 </Grid>
                             </Grid>

src/pages/DemandNote/Search/SearchForm.js

@@ -30,7 +30,8 @@ const useStyles = makeStyles(() => ({
         pointerEvents: "none",
         right: 50,
         display: "flex",
-        alignItems: "center"
+        alignItems: "center",
+        width:"70%"
     },
 }));
 
@@ -166,20 +167,31 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
     const onSubmit = (data) => {
         data.status = selectedStatus?.type;
         let typeArray = [];
+        let sentDateFrom = "";
+        let sentDateTo = "";
+        let sentDueDateFrom = "";
+        let sentDueDateTo = "";
 
         for (let i = 0; i < type.length; i++) {
             typeArray.push(type[i].label);
         }
 
+        if (fromDateValue != "dd / mm / yyyy" && toDateValue != "dd / mm / yyyy") {
+            sentDateFrom = DateUtils.dateValue(fromDateValue)
+            sentDateTo = DateUtils.dateValue(toDateValue)
+            sentDueDateFrom = DateUtils.dateValue(fromDueDateValue)
+            sentDueDateTo = DateUtils.dateValue(toDueDateValue)
+        }
+
         const temp = {
             appNo: data.appNo,
             issueId: issueSelected?.id,
             orgId: (orgSelected?.key && orgSelected?.key > 0) ? orgSelected?.key : "",
             dnNo: data.dnNo,
-            dateFrom: data.dateFrom,
-            dateTo: data.dateTo,
-            dueDateFrom: data.dueDateFrom,
-            dueDateTo: data.dueDateTo,
+            dateFrom: sentDateFrom,
+            dateTo: sentDateTo,
+            dueDateFrom: sentDueDateFrom,
+            dueDateTo: sentDueDateTo,
             status: (data?.status === '' || data?.status?.includes("all")) ? "" : data.status,
         };
         applySearch(temp);
@@ -350,6 +362,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                         InputLabelProps={{
                                             shrink: true
                                         }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                     />
                                 </Grid>
 
@@ -370,6 +383,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                         type="date"
                                         label={"Issue Date (To)"}
                                         defaultValue={searchCriteria.dateTo}
+                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                     />
                                 </Grid>
                             </Grid>
@@ -394,6 +408,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                         InputLabelProps={{
                                             shrink: true
                                         }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                     />
                                 </Grid>
 
@@ -415,6 +430,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                         type="date"
                                         label={"Due Date (To)"}
                                         defaultValue={searchCriteria.dueDateTo}
+                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                     />
                                 </Grid>
                             </Grid>

src/pages/GFMIS/SearchForm.js

@@ -29,7 +29,8 @@ const useStyles = makeStyles(() => ({
         pointerEvents: "none",
         right: 50,
         display: "flex",
-        alignItems: "center"
+        alignItems: "center",
+        width:"70%"
     },
 }));
 
@@ -138,6 +139,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria }) =>
                             InputLabelProps={{
                                 shrink: true
                             }}
+                            sx={{ "& .MuiInputBase-input": {display:"block"} }}
                         />
                     </Grid>
 

src/pages/Payment/Search_GLD/SearchForm.js

@@ -28,7 +28,8 @@ const useStyles = makeStyles(() => ({
         pointerEvents: "none",
         right: 50,
         display: "flex",
-        alignItems: "center"
+        alignItems: "center",
+        width:"70%"
     },
 }));
 
@@ -171,6 +172,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                         InputLabelProps={{
                                             shrink: true
                                         }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                     />
                                 </Grid>
                                 <Grid item xs={6}>
@@ -190,6 +192,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                         type="date"
                                         label="Transaction Date (To)"
                                         defaultValue={searchCriteria.dateTo}
+                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                     />
                                 </Grid>
                             </Grid>

src/pages/Payment/Search_Public/SearchForm.js

@@ -189,6 +189,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                     InputLabelProps={{
                                         shrink: true
                                     }}
+                                    sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                 />
                             </Grid>
 
@@ -209,6 +210,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                     type="date"
                                     label={intl.formatMessage({id: 'payDateTo'})}
                                     defaultValue={searchCriteria.dateTo}
+                                    sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                 />
                             </Grid>
                         </Grid>

src/pages/Proof/Search_GLD/SearchForm.js

@@ -30,7 +30,8 @@ const useStyles = makeStyles(() => ({
         pointerEvents: "none",
         right: 50,
         display: "flex",
-        alignItems: "center"
+        alignItems: "center",
+        width:"70%"
     },
 }));
 
@@ -296,6 +297,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         InputLabelProps={{
                                             shrink: true
                                         }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                     />
                                 </Grid>
                                
@@ -316,6 +318,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         type="date"
                                         label="Proof Issue Date (To)"
                                         defaultValue={searchCriteria.dateTo}
+                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                     />    
                                 </Grid>
                             </Grid>
@@ -371,13 +374,18 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         size="small"
                                         options={orgCombo}
                                         value={orgSelected}
-                                        inputValue={(orgSelected?.label) ? orgSelected?.label : ""}
+                                        getOptionLabel={(option) => option.name? option.name : ""}
+                                        inputValue={orgSelected ? orgSelected.name : ""}
                                         onChange={(event, newValue) => {
-                                            setOrgSelected(newValue);
+                                            if (newValue !== null) {
+                                                setOrgSelected(newValue);
+                                            }else{
+                                                setOrgSelected({});
+                                            }
                                         }}
                                         renderInput={(params) => (
                                             <TextField {...params}
-                                                label="BR No./ Organisation"
+                                                label="Organisation"
                                                 InputLabelProps={{
                                                     shrink: true
                                                 }}

src/pages/Proof/Search_Public/SearchForm.js

@@ -297,6 +297,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                                     InputLabelProps={{
                                         shrink: true
                                     }}
+                                    sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                 />
                             </Grid>
 
@@ -317,6 +318,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                                     type="date"
                                     label={intl.formatMessage({id: 'proofDateTo'})}
                                     defaultValue={searchCriteria.dateTo}
+                                    sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                 />
                             </Grid>
                         </Grid>

src/pages/PublicNotice/Search_GLD/SearchForm.js

@@ -31,9 +31,7 @@ const useStyles = makeStyles(() => ({
         right: 50,
         display: "flex",
         alignItems: "center",
-        md:{
-            width: "130px"
-        }
+        width:"70%"
     },
 }));
 
@@ -71,8 +69,8 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                         :
                         DateUtils.dateStr(fromDateValue)}
                 </div>
-                <input
-                    // className={classes.input}
+                <input 
+                    className={classes.input}
                     ref={inputRef}
                     {...props}
                     // onChange={handleChange}
@@ -234,6 +232,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         InputLabelProps={{
                                             shrink: true
                                         }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                     />
                                 </Grid>
                                 
@@ -254,6 +253,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         type="date"
                                         label={"Submit Date (To)"}
                                         defaultValue={searchCriteria.dateTo}
+                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                     />
                                 </Grid>
                             </Grid>
@@ -346,11 +346,11 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         getOptionLabel={(option) => option.name? option.name : ""}
                                         inputValue={orgSelected ? orgSelected.name : ""}
                                         onChange={(event, newValue) => {
-                                                if (newValue !== null) {
-                                                    setOrgSelected(newValue);
-                                                }else{
-                                                    setOrgSelected({});
-                                                }
+                                            if (newValue !== null) {
+                                                setOrgSelected(newValue);
+                                            }else{
+                                                setOrgSelected({});
+                                            }
                                         }}
                                         renderInput={(params) => (
                                             <TextField {...params}

src/pages/Recon/SearchForm.js

@@ -15,9 +15,26 @@ 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';
 
 // ==============================|| 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, onDownload, onView }) => {
 
@@ -27,29 +44,203 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
     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 [status, setStatus] = React.useState(ComboData.paymentStatus[0]);
     const [method, setMethod] = React.useState(ComboData.paymentMethod[0]);
     const marginBottom = 2.5;
 
     const { register, handleSubmit, getValues } = useForm()
 
+    React.useEffect(() => {
+        setSysTxnFromDateValue(sysTxnMinDate);
+    }, [sysTxnMinDate]);
+
+    React.useEffect(() => {
+        setSysTxnToDateValue(sysTxnMaxDate);
+    }, [sysTxnMaxDate]);
+
+    React.useEffect(() => {
+        setTxnFromDateValue(txnMinDate);
+    }, [txnMinDate]);
+
+    React.useEffect(() => {
+        setTxnToDateValue(txnMaxDate);
+    }, [txnMaxDate]);
+
+    React.useEffect(() => {
+        setCollFromDateValue(collMinDate);
+    }, [collMinDate]);
+
+    React.useEffect(() => {
+        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 = () => {
-        const sysTxnDateFrom = getValues("sysTxnDateFrom")
-        const sysTxnDateTo = getValues("sysTxnDateTo")
-        const txnDateFrom = getValues("txnDateFrom")
-        const txnDateTo = getValues("txnDateTo")
-        const collDateFrom = getValues("collDateFrom")
-        const collDateTo = getValues("collDateTo")
+
+        let sentSysTxnDateFrom = "";
+        let sentSysTxnDateTo = "";
+        let sentTxnDateFrom = "";
+        let sentTxnDateTo = "";
+        let sentCollDateFrom = "";
+        let sentCollDateTo = "";
+
+        if (fromDateValue != "dd / mm / yyyy" && toDateValue != "dd / mm / yyyy") {
+            sentSysTxnDateFrom = DateUtils.dateValue(sysTxnFromDateValue)
+            sentSysTxnDateTo = DateUtils.dateValue(sysTxnToDateValue)
+            sentTxnDateFrom = DateUtils.dateValue(txnFromDateValue)
+            sentTxnDateTo = DateUtils.dateValue(txnToDateValue)
+            sentCollDateFrom = DateUtils.dateValue(collFromDateValue)
+            sentCollDateTo = DateUtils.dateValue(collToDateValue)
+        }
 
         const temp = {
             PaymentMethod:(method?.type && method?.type != 'Please Select') ? method?.type : "",
             PaymentStatus : (status?.type && status?.type != 'all') ? status?.type : "",
-            SysTxnDateFrom:sysTxnDateFrom,
-            SysTxnDateTo:sysTxnDateTo,
-            TxnDateFrom:txnDateFrom,
-            TxnDateTo:txnDateTo,
-            CollDateFrom:collDateFrom,
-            CollDateTo:collDateTo,
+            SysTxnDateFrom: sentSysTxnDateFrom,
+            SysTxnDateTo: sentSysTxnDateTo,
+            TxnDateFrom: sentTxnDateFrom,
+            TxnDateTo: sentTxnDateTo,
+            CollDateFrom: sentCollDateFrom,
+            CollDateTo: sentCollDateTo,
         };
         applySearch(temp);
     };
@@ -186,13 +377,16 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                                         type="date"
                                         label="PNSPS Transaction Date (From)"
                                         ////defaultValue={searchCriteria.dateFrom}
-                                        InputProps={{ inputProps: { max: sysTxnMaxDate } }}
+                                        InputProps={{
+                                            inputComponent: SysTxnFormDateInputComponent,
+                                        }}
                                         onChange={(newValue) => {
-                                            setSysTxnMinDate(DateUtils.dateValue(newValue));
+                                            setSysTxnMinDate(newValue.target.value);
                                         }}
                                         InputLabelProps={{
                                             shrink: true
                                         }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                     />
                                 </Grid>
                                 <Grid item xs={4}>
@@ -202,14 +396,17 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                                             shrink: true
                                         }}
                                         {...register("sysTxnDateTo")}
-                                        InputProps={{ inputProps: { min: sysTxnMinDate } }}
+                                        InputProps={{
+                                            inputComponent: SysTxnToDateInputComponent,
+                                        }}
                                         onChange={(newValue) => {
-                                            setsysTxnMaxDate(DateUtils.dateValue(newValue));
+                                            setsysTxnMaxDate(newValue.target.value);
                                         }}
                                         id="sysTxnDateTo"
                                         type="date"
                                         label="PNSPS Transaction Date (To)"
                                         ////defaultValue={searchCriteria.dateTo}
+                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                     />
                                 </Grid>
                             </Grid>
@@ -228,13 +425,16 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                                         type="date"
                                         label="FI Transaction Date (From)"
                                         //defaultValue={searchCriteria.dateFrom}
-                                        InputProps={{ inputProps: { max: txnMaxDate } }}
+                                        InputProps={{
+                                            inputComponent: TxnFormDateInputComponent,
+                                        }}
                                         onChange={(newValue) => {
-                                            setTxnMaxDate(DateUtils.dateValue(newValue));
+                                            setTxnMinDate(newValue.target.value);
                                         }}
                                         InputLabelProps={{
                                             shrink: true
                                         }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                     />
                                 </Grid>
                                 <Grid item xs={4}>
@@ -244,14 +444,17 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                                             shrink: true
                                         }}
                                         {...register("txnDateTo")}
-                                        InputProps={{ inputProps: { min: txnMinDate } }}
+                                        InputProps={{
+                                            inputComponent: TxnToDateInputComponent,
+                                        }}
                                         onChange={(newValue) => {
-                                            setTxnMinDate(DateUtils.dateValue(newValue));
+                                            setTxnMaxDate(newValue.target.value);
                                         }}
                                         id="txnDateTo"
                                         type="date"
                                         label="FI Transaction Date (To)"
                                         //defaultValue={searchCriteria.dateTo}
+                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                     />
                                 </Grid>
                             </Grid>
@@ -270,13 +473,16 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                                         type="date"
                                         label="Bank Credit Date (From)"
                                         //defaultValue={searchCriteria.dateFrom}
-                                        InputProps={{ inputProps: { max: collMaxDate } }}
+                                        InputProps={{
+                                            inputComponent: CollFormDateInputComponent,
+                                        }}
                                         onChange={(newValue) => {
-                                            setCollMinDate(DateUtils.dateValue(newValue));
+                                            setCollMinDate(newValue.target.value);
                                         }}
                                         InputLabelProps={{
                                             shrink: true
                                         }}
+                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                     />
                                 </Grid>
                                 <Grid item xs={4}>
@@ -286,14 +492,17 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                                             shrink: true
                                         }}
                                         {...register("collDateTo")}
-                                        InputProps={{ inputProps: { min: collMinDate } }}
+                                        InputProps={{
+                                            inputComponent: CollToDateInputComponent,
+                                        }}
                                         onChange={(newValue) => {
-                                            setCollMaxDate(DateUtils.dateValue(newValue));
+                                            setCollMaxDate(newValue.target.value);
                                         }}
                                         id="collDateTo"
                                         type="date"
                                         label="Bank Credit Date (To)"
                                         //defaultValue={searchCriteria.dateTo}
+                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                     />
                                 </Grid>
                             </Grid>