From 8501ebe670d567255f0850e15e2977c77bc9ed11 Mon Sep 17 00:00:00 2001
From: Nikhil Nandagopal <nikhil@appsmith.com>
Date: Tue, 9 Jun 2020 14:14:13 +0530
Subject: [PATCH] added date format to date picker

---
 .../designSystems/blueprint/DatePickerComponent.tsx   | 11 ++++++-----
 app/client/src/mockResponses/WidgetConfigResponse.tsx |  4 ++--
 app/client/src/utils/Validators.ts                    |  6 +++++-
 app/client/src/widgets/DatePickerWidget.tsx           |  2 +-
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx b/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
index 6f339a6cd2..3720ce46c4 100644
--- a/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
@@ -106,7 +106,7 @@ class DatePickerComponent extends React.Component<
             className={this.props.isLoading ? "bp3-skeleton" : ""}
             formatDate={this.formatDate}
             parseDate={this.parseDate}
-            placeholder={this.props.dateFormat}
+            placeholder={"Select Date"}
             disabled={this.props.isDisabled}
             showActionsBar={true}
             timePrecision={TimePrecision.MINUTE}
@@ -137,16 +137,17 @@ class DatePickerComponent extends React.Component<
   }
 
   formatDate = (date: Date): string => {
-    const dateFormat = "DD/MM/YYYY HH:mm";
-    return moment(date).format(dateFormat);
+    return moment(date).format(this.props.dateFormat);
   };
 
   parseDate = (dateStr: string): Date => {
-    return moment(dateStr, "DD/MM/YYYY HH:mm").toDate();
+    return moment(dateStr).toDate();
   };
 
   onDateSelected = (selectedDate: Date) => {
-    const date = selectedDate ? moment(selectedDate).toISOString(true) : "";
+    const date = selectedDate
+      ? moment(selectedDate).format(this.props.dateFormat)
+      : "";
     this.setState({ selectedDate: date });
     this.props.onDateSelected(date);
   };
diff --git a/app/client/src/mockResponses/WidgetConfigResponse.tsx b/app/client/src/mockResponses/WidgetConfigResponse.tsx
index b2dd95d14b..0ead73cd0d 100644
--- a/app/client/src/mockResponses/WidgetConfigResponse.tsx
+++ b/app/client/src/mockResponses/WidgetConfigResponse.tsx
@@ -86,10 +86,10 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       datePickerType: "DATE_PICKER",
       rows: 1,
       label: "",
-      dateFormat: "DD/MM/YYYY",
+      dateFormat: "DD/MM/YYYY HH:mm",
       columns: 5,
       widgetName: "DatePicker",
-      defaultDate: moment().toISOString(true),
+      defaultDate: moment().format("DD/MM/YYYY HH:mm"),
     },
     TABLE_WIDGET: {
       rows: 7,
diff --git a/app/client/src/utils/Validators.ts b/app/client/src/utils/Validators.ts
index 061df2a670..4bc8aa894f 100644
--- a/app/client/src/utils/Validators.ts
+++ b/app/client/src/utils/Validators.ts
@@ -403,7 +403,11 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
       };
     }
     const isValid = moment(value).isValid();
-    const parsed = isValid ? moment(value).toISOString(true) : today;
+    const parsed = isValid
+      ? props.dateFormat
+        ? moment(value).format(props.dateFormat)
+        : moment(value).toISOString(true)
+      : today;
     return {
       isValid,
       parsed,
diff --git a/app/client/src/widgets/DatePickerWidget.tsx b/app/client/src/widgets/DatePickerWidget.tsx
index 5ff07eee17..4a33f731da 100644
--- a/app/client/src/widgets/DatePickerWidget.tsx
+++ b/app/client/src/widgets/DatePickerWidget.tsx
@@ -59,7 +59,7 @@ class DatePickerWidget extends BaseWidget<DatePickerWidgetProps, WidgetState> {
     return (
       <DatePickerComponent
         label={`${this.props.label}`}
-        dateFormat={"DD/MM/YYYY HH:mm"}
+        dateFormat={this.props.dateFormat}
         widgetId={this.props.widgetId}
         isDisabled={this.props.isDisabled}
         datePickerType={"DATE_PICKER"}