Merge pull request #343 from OpenSignLabs/staging

fix: selected date resets to the current date when navigating between document pages.

apps/OpenSign/src/components/pdf/Placeholder.js

@@ -74,25 +74,22 @@ const changeDateToMomentFormat = (format) => {
       return "L";
   }
 };
-
-//function to get default date
-const getDefaultdate = (selectedDate, format = "dd-MM-yyyy") => {
-  let date;
-  if (format && format === "dd-MM-yyyy") {
-    const newdate = selectedDate
-      ? selectedDate
-      : moment(new Date()).format(changeDateToMomentFormat(format));
-    const [day, month, year] = newdate.split("-");
-    date = new Date(`${year}-${month}-${day}`);
-  } else {
-    date = new Date(selectedDate);
-  }
-  const value = date;
-  return value;
-};
 //function to get default format
 const getDefaultFormat = (dateFormat) => dateFormat || "MM/dd/yyyy";
-
+//function to convert formated date to new Date() format
+const getDefaultDate = (dateStr, format) => {
+  //get valid date format for moment to convert formated date to new Date() format
+  const formats = changeDateToMomentFormat(format);
+  const parsedDate = moment(dateStr, formats);
+  let date;
+  if (parsedDate.isValid()) {
+    date = new Date(parsedDate.toISOString());
+    return date;
+  } else {
+    date = new Date();
+    return date;
+  }
+};
 function Placeholder(props) {
   //'isTouchDevice' is used to detect whether a device has a touchscreen or is mouse-based
   const isTouchDevice = navigator.maxTouchPoints > 0;
@@ -104,28 +101,16 @@ function Placeholder(props) {
   const holdTimeout = useRef(null);
   const startTime = useRef(null); // Track when the user starts holdings
   const [isDisableDragging, setIsDisableDragging] = useState(true);
-  const [selectDate, setSelectDate] = useState({
-    date:
-      props.pos.type === "date"
-        ? moment(
-            getDefaultdate(
-              props?.pos?.options?.response,
-              props.pos?.options?.validation?.format
-            ).getTime()
-          ).format(
-            changeDateToMomentFormat(props.pos?.options?.validation?.format)
-          )
-        : "",
-    format:
-      props.pos.type === "date"
-        ? getDefaultFormat(props.pos?.options?.validation?.format)
-        : ""
-  });
+  const [selectDate, setSelectDate] = useState({});
   const [dateFormat, setDateFormat] = useState([]);
   const [clickonWidget, setClickonWidget] = useState({});
   const [startDate, setStartDate] = useState(
-    props.pos.type === "date" &&
-      getDefaultdate(new Date(), props.pos?.options?.validation?.format)
+    props?.pos?.options?.response
+      ? getDefaultDate(
+          props?.pos?.options?.response,
+          props.pos?.options?.validation?.format
+        )
+      : new Date()
   );
   const [getCheckboxRenderWidth, setGetCheckboxRenderWidth] = useState({
     width: null,
@@ -164,7 +149,6 @@ function Placeholder(props) {
 
     return () => clearTimeout(timer);
   }, [props.pos]);
-
   useEffect(() => {
     const onOutsideClick = () => {
       if (!isDraggingEnabled) {
@@ -476,7 +460,7 @@ function Placeholder(props) {
       const isDateChange = true;
       const dateObj = {
         date: startDate,
-        format: selectDate.format
+        format: getDefaultFormat(props.pos?.options?.validation?.format)
       };
       handleSaveDate(dateObj, isDateChange); //function to save date and format in local array
     }
@@ -485,19 +469,18 @@ function Placeholder(props) {
   //function to save date and format on local array onchange date and onclick format
   const handleSaveDate = (data, isDateChange) => {
     let updateDate = data.date;
-    //check if date change by user
-    if (isDateChange) {
-      //`changeDateToMomentFormat` is used to convert date as per required to moment package
-      updateDate = moment(data.date).format(
-        changeDateToMomentFormat(data.format)
+    let date;
+    if (data?.format === "dd-MM-yyyy") {
+      date = isDateChange
+        ? moment(updateDate).format(changeDateToMomentFormat(data.format))
+        : updateDate;
+    } else {
+      //using moment package is used to change date as per the format provided in selectDate obj e.g. - MM/dd/yyyy -> 03/12/2024
+      const newDate = new Date(updateDate);
+      date = moment(newDate.getTime()).format(
+        changeDateToMomentFormat(data?.format)
       );
     }
-    //using moment package is used to change date as per the format provided in selectDate obj e.g. - MM/dd/yyyy -> 03/12/2024
-    //`getDefaultdate` is used to convert update date in new Date() format
-    const date = moment(
-      getDefaultdate(updateDate, data?.format).getTime()
-    ).format(changeDateToMomentFormat(data?.format));
-
     //`onChangeInput` is used to save data related to date in a placeholder field
     onChangeInput(
       date,