From 25a196d354c9d09dc55e0d8d816ea02313d06423 Mon Sep 17 00:00:00 2001
From: Arpit <arpitnath42@gmail.com>
Date: Fri, 3 Dec 2021 13:52:14 +0530
Subject: [PATCH] fixed: Improper date parsing (#1318)

---
 .../Editor/Components/Table/Datepicker.jsx    | 52 +++++++++++--------
 .../src/Editor/Components/Table/Table.jsx     |  4 +-
 .../src/Editor/Inspector/Components/Table.jsx | 15 +++++-
 3 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/frontend/src/Editor/Components/Table/Datepicker.jsx b/frontend/src/Editor/Components/Table/Datepicker.jsx
index 84c2903bf6..0c6eed954c 100644
--- a/frontend/src/Editor/Components/Table/Datepicker.jsx
+++ b/frontend/src/Editor/Components/Table/Datepicker.jsx
@@ -5,45 +5,55 @@ import moment from 'moment';
 import 'react-datetime/css/react-datetime.css';
 import '@/_styles/custom.scss';
 
-export const Datepicker = function Datepicker({ value, onChange, readOnly, isTimeChecked, dateFormat }) {
-  const [date, setDate] = React.useState(value);
+const getDate = (value, parseDateFormat, displayFormat) => {
+  const dateString = value;
+  const momentObj = moment(dateString, parseDateFormat);
+  const momentString = momentObj.format(displayFormat);
+  return momentString;
+};
 
-  const dateChange = (e) => {
-    if (isTimeChecked) {
-      setDate(e.format(`${dateFormat} LT`));
-    } else {
-      setDate(e.format(dateFormat));
-    }
+export const Datepicker = function Datepicker({
+  value,
+  onChange,
+  readOnly,
+  isTimeChecked,
+  dateDisplayFormat, //?Display date format
+  parseDateFormat, //?Parse date format
+}) {
+  const [date, setDate] = React.useState(() => getDate(value, parseDateFormat, dateDisplayFormat));
+
+  const dateChange = (event) => {
+    const value = event._isAMomentObject ? event.format() : event;
+    let selectedDateFormat = isTimeChecked ? `${dateDisplayFormat} LT` : dateDisplayFormat;
+    const dateString = moment(value).format(selectedDateFormat);
+    setDate(() => dateString);
   };
 
   React.useEffect(() => {
-    if (!isTimeChecked) {
-      setDate(moment(value, 'DD-MM-YYYY').format(dateFormat));
-    }
-
-    if (isTimeChecked) {
-      setDate(moment(value, 'DD-MM-YYYY LT').format(`${dateFormat} LT`));
-    }
+    let selectedDateFormat = isTimeChecked ? `${dateDisplayFormat} LT` : dateDisplayFormat;
+    const dateString = getDate(value, parseDateFormat, selectedDateFormat);
+    setDate(() => dateString);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isTimeChecked, readOnly, dateFormat]);
-
-  let inputProps = {
-    disabled: !readOnly,
-  };
+  }, [isTimeChecked, readOnly, dateDisplayFormat]);
 
   const onDatepickerClose = () => {
     onChange(date);
   };
 
+  let inputProps = {
+    disabled: !readOnly,
+  };
+
   return (
     <>
       <Datetime
         inputProps={inputProps}
         timeFormat={isTimeChecked}
         className="cell-type-datepicker"
-        dateFormat={dateFormat}
+        dateFormat={dateDisplayFormat}
         value={date}
         onChange={dateChange}
+        closeOnSelect={true}
         onClose={onDatepickerClose}
       />
     </>
diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index 76f19473f2..8b43435988 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -303,6 +303,7 @@ export function Table({
     if (columnType === 'datepicker') {
       column.isTimeChecked = column.isTimeChecked ? column.isTimeChecked : false;
       column.dateFormat = column.dateFormat ? column.dateFormat : 'DD/MM/YYYY';
+      column.parseDateFormat = column.parseDateFormat ?? column.dateFormat; //backwards compatibility
     }
 
     const width = columnSize || defaultColumn.width;
@@ -529,10 +530,11 @@ export function Table({
             return (
               <div>
                 <Datepicker
-                  dateFormat={column.dateFormat}
+                  dateDisplayFormat={column.dateFormat}
                   isTimeChecked={column.isTimeChecked}
                   value={cellValue}
                   readOnly={column.isEditable}
+                  parseDateFormat={column.parseDateFormat}
                   onChange={(value) => {
                     handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original);
                   }}
diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
index bc742d3d85..ac4d835b75 100644
--- a/frontend/src/Editor/Inspector/Components/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -334,7 +334,7 @@ class Table extends React.Component {
 
           {column.columnType === 'datepicker' && (
             <div>
-              <label className="form-label">Date Format</label>
+              <label className="form-label">Date Display Format</label>
               <div className="field mb-2">
                 <CodeHinter
                   currentState={this.props.currentState}
@@ -346,6 +346,19 @@ class Table extends React.Component {
                   onChange={(value) => this.onColumnItemChange(index, 'dateFormat', value)}
                 />
               </div>
+              <label className="form-label">Date Parse Format</label>
+              <div className="field mb-2">
+                <input
+                  type="text"
+                  className="form-control text-field"
+                  onChange={(e) => {
+                    e.stopPropagation();
+                    this.onColumnItemChange(index, 'parseDateFormat', e.target.value);
+                  }}
+                  defaultValue={column.parseDateFormat}
+                  placeholder={'DD-MM-YYYY'}
+                />
+              </div>
               <div className="field mb-2">
                 <label className="form-check form-switch my-2">
                   <input