diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js
index ca337cc1b..9ab841933 100644
--- a/apps/OpenSign/src/components/pdf/Placeholder.js
+++ b/apps/OpenSign/src/components/pdf/Placeholder.js
@@ -5,6 +5,7 @@ import { Rnd } from "react-rnd";
import {
defaultWidthHeight,
isMobile,
+ onChangeInput,
textInputWidget,
textWidget
} from "../../constant/Utils";
@@ -66,9 +67,7 @@ const changeDateToMomentFormat = (format) => {
}
};
-// const getDefaultdate = (selectedDate) => {
-// return selectedDate ? new Date(selectedDate) : new Date();
-// };
+//function to get default date
const getDefaultdate = (selectedDate, format = "dd-MM-yyyy") => {
let date;
if (format && format === "dd-MM-yyyy") {
@@ -83,17 +82,12 @@ const getDefaultdate = (selectedDate, format = "dd-MM-yyyy") => {
const value = date;
return value;
};
+//function to get default format
const getDefaultFormat = (dateFormat) => dateFormat || "MM/dd/yyyy";
function Placeholder(props) {
const [isDraggingEnabled, setDraggingEnabled] = useState(true);
const [isShowDateFormat, setIsShowDateFormat] = useState(false);
- // const [selectDate, setSelectDate] = useState({
- // date: moment(
- // getDefaultdate(props?.pos?.options?.response).getTime()
- // ).format(changeDateToMomentFormat(props.pos?.options?.validation?.format)),
- // format: getDefaultFormat(props.pos?.options?.validation?.format)
- // });
const [selectDate, setSelectDate] = useState({
date: moment(
getDefaultdate(
@@ -104,10 +98,6 @@ function Placeholder(props) {
format: getDefaultFormat(props.pos?.options?.validation?.format)
});
const [dateFormat, setDateFormat] = useState([]);
- const [saveDateFormat, setSaveDateFormat] = useState("");
- // const [startDate, setStartDate] = useState(
- // getDefaultdate(props?.pos?.options?.response)
- // );
const [startDate, setStartDate] = useState(
getDefaultdate(
props?.pos?.options?.response,
@@ -126,36 +116,6 @@ function Placeholder(props) {
"DD MMMM, YYYY"
];
- //useEffect for to set date and date format for all flow (signyour-self, request-sign,placeholder,template)
- //checking if already have data and set else set new date
- // useEffect(() => {
- // console.log('go here')
- // //set default current date and default format MM/dd/yyyy
- // const defaultFormat = props.pos?.options?.validation?.format;
- // const updateDate = props?.pos?.options?.response
- // ? new Date(props?.pos?.options?.response)
- // : new Date();
- // //DD-mm-YYYY
- // const dateFormat = defaultFormat && defaultFormat;
- // // const isMomentType = dateFormat && dateFormat === "MM/dd/YYYY";
- // // const selectMomentFormat = isMomentType ? "MM/DD/YYYY" : dateFormat;
- // const selectMomentFormat = changeDateToMomentFormat(dateFormat);
-
- // // const isFormatType = dateFormat && dateFormat === "MM/dd/YYYY";
- // const getFormat = dateFormat || "MM/dd/yyyy";
- // const milliseconds = updateDate.getTime();
- // const newDate = moment(milliseconds).format(selectMomentFormat);
- // // console.log('new date',newDate)
- // const dateObj = {
- // date: newDate,
- // format: getFormat
- // };
- // console.log("dateobj selectdate useEffect", dateObj);
- // setSelectDate(dateObj);
- // setStartDate(updateDate);
- // // eslint-disable-next-line react-hooks/exhaustive-deps
- // }, []);
-
//function change format array list with selected date and format
const changeDateFormat = () => {
const updateDate = [];
@@ -178,15 +138,14 @@ function Placeholder(props) {
setDateFormat(updateDate);
};
- // console.log("selected date", selectDate);
useEffect(() => {
if (props.isPlaceholder || props.isSignYourself) {
- // console.log("selected date useEffect", selectDate);
selectDate && changeDateFormat();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectDate]);
- //handle to close drop down menu onclick screen
+
+ //it detect outside click of date dropdown menu
useEffect(() => {
const closeMenuOnOutsideClick = (e) => {
if (isShowDateFormat && !e.target.closest("#menu-container")) {
@@ -271,6 +230,7 @@ function Placeholder(props) {
}
};
+ //function to set state value of onclick on widget's setting icon
const handleWidgetsOnclick = () => {
if (props.pos.type === "radio") {
props.setIsRadio(true);
@@ -289,6 +249,7 @@ function Placeholder(props) {
props.setWidgetType(props.pos.type);
props.setCurrWidgetsDetails(props.pos);
};
+ //function ro set state value of onclick on widget's copy icon
const handleCopyPlaceholder = (e) => {
if (props.data && props?.pos?.type !== textWidget) {
props.setSignerObjId(props?.data?.signerObjId);
@@ -303,6 +264,35 @@ function Placeholder(props) {
props.setSignKey(props.pos.key);
};
+ //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)
+ );
+ }
+ //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,
+ props.pos.key,
+ props.xyPostion,
+ props.index,
+ props.setXyPostion,
+ props.data && props.data.Id,
+ false,
+ data?.format
+ );
+ setSelectDate({ date: date, format: data?.format });
+ };
const PlaceholderIcon = () => {
return (
props.isShowBorder && (
@@ -439,10 +429,12 @@ function Placeholder(props) {
e.stopPropagation();
setIsShowDateFormat(!isShowDateFormat);
setSelectDate(data);
+ handleSaveDate(data);
}}
onClick={() => {
setIsShowDateFormat(!isShowDateFormat);
setSelectDate(data);
+ handleSaveDate(data);
}}
className="dropdown-item itemColor"
style={{ fontSize: "12px" }}
@@ -695,11 +687,10 @@ function Placeholder(props) {
isNeedSign={props.isNeedSign}
setSelectDate={setSelectDate}
selectDate={selectDate}
- setSaveDateFormat={setSaveDateFormat}
- saveDateFormat={saveDateFormat}
setValidateAlert={props.setValidateAlert}
setStartDate={setStartDate}
startDate={startDate}
+ handleSaveDate={handleSaveDate}
/>
) : (
@@ -722,11 +713,10 @@ function Placeholder(props) {
isNeedSign={props.isNeedSign}
setSelectDate={setSelectDate}
selectDate={selectDate}
- setSaveDateFormat={setSaveDateFormat}
- saveDateFormat={saveDateFormat}
setValidateAlert={props.setValidateAlert}
setStartDate={setStartDate}
startDate={startDate}
+ handleSaveDate={handleSaveDate}
/>
)}
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderType.js b/apps/OpenSign/src/components/pdf/PlaceholderType.js
index c575bcd47..5151f794d 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderType.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderType.js
@@ -117,7 +117,6 @@ function PlaceholderType(props) {
? props.pos?.options?.defaultValue
: ""
);
-
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@@ -135,54 +134,7 @@ function PlaceholderType(props) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.pos?.options?.defaultValue]);
- //useEffect to save date and format on local array
- useEffect(() => {
- if (type && type === "date") {
- if (props?.selectDate) {
- // let updateDate;
- // if (props?.selectDate.format === "dd-MM-yyyy") {
- // // console.log('saveDateformat',props.saveDateFormat)
- // const [day, month, year] = props.saveDateFormat.split("-");
- // updateDate = new Date(`${year}-${month}-${day}`);
- // console.log('update',updateDate)
- // } else {
- // if (props?.saveDateFormat) {
- // updateDate = new Date(props.saveDateFormat);
- // }
- // }
- // const updateDate = new Date(props.saveDateFormat);
- // props.setStartDate(updateDate);
- // const dateObj = {
- // date: props.saveDateFormat,
- // format: props.selectDate
- // ? props.selectDate?.format
- // : props.pos?.options?.validation?.format
- // ? props.pos?.options?.validation?.format
- // : "MM/dd/yyyy"
- // };
-
- // props.setSelectDate(dateObj);
- onChangeInput(
- props.saveDateFormat,
- props.pos.key,
- props.xyPostion,
- props.index,
- props.setXyPostion,
- props.data && props.data.Id,
- false,
- props.selectDate?.format
- ? props.selectDate.format
- : props.pos?.options?.validation?.format
- ? props.pos?.options?.validation?.format
- : "MM/dd/yyyy"
- );
- }
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [props.saveDateFormat]);
-
const dateValue = (value) => {
- props.setSaveDateFormat(value);
return {value};
};
const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
@@ -325,6 +277,16 @@ function PlaceholderType(props) {
);
};
+ //function to set onchange date
+ const handleOnDateChange = (date) => {
+ props.setStartDate(date);
+ const isDateChange = true;
+ const dateObj = {
+ date: date,
+ format: props.selectDate.format
+ };
+ props.handleSaveDate(dateObj, isDateChange);
+ };
switch (type) {
case "signature":
return props.pos.SignUrl ? (
@@ -670,18 +632,10 @@ function PlaceholderType(props) {
: props.pos.options?.response &&
new Date(props.pos.options.response)
}
- onChange={(date) => {
- props.setStartDate(date);
- }}
+ onChange={(date) => handleOnDateChange(date)}
popperPlacement="top-end"
customInput={}
dateFormat={
- // props.pos?.options?.validation?.format
- // ? props.pos?.options?.validation?.format
- // : props.selectDate
- // ? props.selectDate?.format
- // : "MM/dd/YYYY"
-
props.selectDate
? props.selectDate?.format
: props.pos?.options?.validation?.format
diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js
index 1a8a2b3a6..dad40145d 100644
--- a/apps/OpenSign/src/constant/Utils.js
+++ b/apps/OpenSign/src/constant/Utils.js
@@ -249,7 +249,11 @@ export const addWidgetOptions = (type) => {
case "job title":
return { ...defaultOpt, validation: { type: "text", pattern: "" } };
case "date":
- return { ...defaultOpt, response: getDate() };
+ return {
+ ...defaultOpt,
+ response: getDate(),
+ validation: { format: "MM/dd/yyyy", type: "date-format" }
+ };
case "image":
return defaultOpt;
case "email":
diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
index f86bd1228..2dd3ec38b 100644
--- a/apps/OpenSign/src/pages/SignyourselfPdf.js
+++ b/apps/OpenSign/src/pages/SignyourselfPdf.js
@@ -381,7 +381,8 @@ function SignYourSelf() {
case "date":
return {
name: "date",
- defaultValue: getDate()
+ response: getDate(),
+ validation: { format: "MM/dd/yyyy", type: "date-format" }
};
case "image":
return {