diff --git a/app/client/src/components/ads/DatePickerComponent.tsx b/app/client/src/components/ads/DatePickerComponent.tsx
index 4cee86022e..07519172bf 100644
--- a/app/client/src/components/ads/DatePickerComponent.tsx
+++ b/app/client/src/components/ads/DatePickerComponent.tsx
@@ -97,7 +97,7 @@ interface DatePickerComponentProps {
   value: Date | null;
   onChange?: (selectedDate: Date, isUserChange: boolean) => void;
   formatDate?: (date: Date) => string;
-  parseDate?: (dateStr: string) => Date;
+  parseDate?: (dateStr: string) => Date | null;
 }
 
 function DatePickerComponent(props: DatePickerComponentProps) {
diff --git a/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx b/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
index d85e2158d7..1f5ddc42b3 100644
--- a/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
@@ -108,9 +108,13 @@ class DatePickerComponent extends React.Component<
           .clone()
           .set({ month: 11, date: 31, year: year + 20 })
           .toDate();
-    const isValid = this.state.selectedDate
-      ? this.isValidDate(this.parseDate(this.state.selectedDate))
-      : true;
+    const parsedDate = this.state.selectedDate
+      ? this.parseDate(this.state.selectedDate)
+      : null;
+    const isValid =
+      this.state.selectedDate && parsedDate
+        ? this.isValidDate(parsedDate)
+        : true;
     const value =
       isValid && this.state.selectedDate
         ? this.parseDate(this.state.selectedDate)
@@ -192,12 +196,16 @@ class DatePickerComponent extends React.Component<
     return moment(date).format(dateFormat);
   };
 
-  parseDate = (dateStr: string): Date => {
-    const dateFormat = this.props.dateFormat || ISO_DATE_FORMAT;
-    const date = moment(dateStr, dateFormat);
+  parseDate = (dateStr: string): Date | null => {
+    if (!dateStr) {
+      return null;
+    } else {
+      const dateFormat = this.props.dateFormat || ISO_DATE_FORMAT;
+      const date = moment(dateStr, dateFormat);
 
-    if (date.isValid()) return moment(dateStr, dateFormat).toDate();
-    else return moment().toDate();
+      if (date.isValid()) return moment(dateStr, dateFormat).toDate();
+      else return moment().toDate();
+    }
   };
 
   /**
@@ -207,7 +215,7 @@ class DatePickerComponent extends React.Component<
    *
    * @param selectedDate
    */
-  onDateSelected = (selectedDate: Date, isUserChange: boolean) => {
+  onDateSelected = (selectedDate: Date | null, isUserChange: boolean) => {
     if (isUserChange) {
       const { onDateSelected } = this.props;
 
diff --git a/app/client/src/components/designSystems/blueprint/DatePickerComponent2.tsx b/app/client/src/components/designSystems/blueprint/DatePickerComponent2.tsx
index a2d410b84f..26406cbf13 100644
--- a/app/client/src/components/designSystems/blueprint/DatePickerComponent2.tsx
+++ b/app/client/src/components/designSystems/blueprint/DatePickerComponent2.tsx
@@ -194,11 +194,17 @@ class DatePickerComponent extends React.Component<
     return moment(date).format(dateFormat);
   };
 
-  parseDate = (dateStr: string): Date => {
-    const date = moment(dateStr);
-    const dateFormat = this.props.dateFormat || ISO_DATE_FORMAT;
-    if (date.isValid()) return moment(dateStr, dateFormat).toDate();
-    else return moment().toDate();
+  parseDate = (dateStr: string): Date | null => {
+    //when user clears date field the value of dateStr will be empty
+    //and that means user is clearing date field
+    if (!dateStr) {
+      return null;
+    } else {
+      const date = moment(dateStr);
+      const dateFormat = this.props.dateFormat || ISO_DATE_FORMAT;
+      if (date.isValid()) return moment(dateStr, dateFormat).toDate();
+      else return moment().toDate();
+    }
   };
 
   /**
@@ -208,7 +214,8 @@ class DatePickerComponent extends React.Component<
    *
    * @param selectedDate
    */
-  onDateSelected = (selectedDate: Date, isUserChange: boolean) => {
+  onDateSelected = (selectedDate: Date | null, isUserChange: boolean) => {
+    console.log({ selectedDate, isUserChange });
     if (isUserChange) {
       const { onDateSelected } = this.props;
 
diff --git a/app/client/src/components/propertyControls/DatePickerControl.tsx b/app/client/src/components/propertyControls/DatePickerControl.tsx
index 0151e46e44..a306e29c1a 100644
--- a/app/client/src/components/propertyControls/DatePickerControl.tsx
+++ b/app/client/src/components/propertyControls/DatePickerControl.tsx
@@ -105,14 +105,14 @@ class DatePickerControl extends BaseControl<
    *
    * @param date
    */
-  onDateSelected = (date: Date, isUserChange: boolean): void => {
+  onDateSelected = (date: Date | null, isUserChange: boolean): void => {
     if (isUserChange) {
       const selectedDate = date
         ? this.props.widgetProperties.version === 2
           ? date.toISOString()
           : this.formatDate(date)
         : undefined;
-      const isValid = this.validateDate(date);
+      const isValid = date ? this.validateDate(date) : true;
       if (!isValid) return;
       // if everything is ok, put date in state
       this.setState({ selectedDate: selectedDate });
@@ -137,15 +137,19 @@ class DatePickerControl extends BaseControl<
     return moment(date).format(dateFormat);
   };
 
-  parseDate = (dateStr: string): Date => {
-    const dateFormat =
-      this.props.widgetProperties.version === 2
-        ? ISO_DATE_FORMAT
-        : this.props.widgetProperties.dateFormat || ISO_DATE_FORMAT;
-    const date = moment(dateStr, dateFormat);
+  parseDate = (dateStr: string): Date | null => {
+    if (!dateStr) {
+      return null;
+    } else {
+      const dateFormat =
+        this.props.widgetProperties.version === 2
+          ? ISO_DATE_FORMAT
+          : this.props.widgetProperties.dateFormat || ISO_DATE_FORMAT;
+      const date = moment(dateStr, dateFormat);
 
-    if (date.isValid()) return moment(dateStr, dateFormat).toDate();
-    else return moment().toDate();
+      if (date.isValid()) return moment(dateStr, dateFormat).toDate();
+      else return moment().toDate();
+    }
   };
 
   static getControlType() {
diff --git a/app/client/src/widgets/DatePickerWidget2.tsx b/app/client/src/widgets/DatePickerWidget2.tsx
index fa5cf0a163..ff9ac15331 100644
--- a/app/client/src/widgets/DatePickerWidget2.tsx
+++ b/app/client/src/widgets/DatePickerWidget2.tsx
@@ -194,8 +194,8 @@ class DatePickerWidget extends BaseWidget<DatePickerWidget2Props, WidgetState> {
   static getDerivedPropertiesMap(): DerivedPropertiesMap {
     return {
       isValid: `{{ this.isRequired ? !!this.selectedDate : true }}`,
-      selectedDate: `{{ this.value ? moment(this.value).toISOString() : (this.defaultDate ? moment(this.defaultDate).toISOString() : "")}}`,
-      formattedDate: `{{ this.value ? moment(this.value).format(this.dateFormat) : (this.defaultDate ? moment(this.defaultDate).format(this.dateFormat) : "")}}`,
+      selectedDate: `{{ this.value ? moment(this.value).toISOString() : "" }}`,
+      formattedDate: `{{ this.value ? moment(this.value).format(this.dateFormat) : "" }}`,
     };
   }