diff --git a/demo-shell/src/app/components/card-view/card-view.component.html b/demo-shell/src/app/components/card-view/card-view.component.html
index e39f4116c8..87c8edd452 100644
--- a/demo-shell/src/app/components/card-view/card-view.component.html
+++ b/demo-shell/src/app/components/card-view/card-view.component.html
@@ -4,7 +4,9 @@
     <mat-card class="adf-card-view">
         <adf-card-view
             [properties]="properties"
-            [editable]="true">
+            [editable]="true"
+            [displayClearAction]="showClearDateAction"
+            [displayNoneOption]="showNoneOption">
         </adf-card-view>
     </mat-card>
 
@@ -22,6 +24,20 @@
         (change)="toggleEditable()"
         [checked]="isEditable">
         Editable
+    </mat-slide-toggle><br>
+    <mat-slide-toggle
+        id="adf-toggle-clear-date"
+        [color]="'primary'"
+        (change)="toggleClearDate()"
+        [checked]="showClearDateAction">
+        Show clear date icon
+    </mat-slide-toggle><br>
+    <mat-slide-toggle
+        id="adf-toggle-none-option"
+        [color]="'primary'"
+        (change)="toggleNoneOption()"
+        [checked]="showNoneOption">
+        Show none option
     </mat-slide-toggle>
 </p>
 
diff --git a/demo-shell/src/app/components/card-view/card-view.component.ts b/demo-shell/src/app/components/card-view/card-view.component.ts
index fe85f5c65e..0c3f50e61b 100644
--- a/demo-shell/src/app/components/card-view/card-view.component.ts
+++ b/demo-shell/src/app/components/card-view/card-view.component.ts
@@ -44,6 +44,8 @@ export class CardViewComponent implements OnInit, OnDestroy {
     isEditable = true;
     properties: any;
     logs: string[];
+    showClearDateAction = false;
+    showNoneOption = false;
 
     private onDestroy$ = new Subject<boolean>();
 
@@ -166,6 +168,14 @@ export class CardViewComponent implements OnInit, OnDestroy {
         this.createCard();
     }
 
+    toggleClearDate() {
+        this.showClearDateAction = !this.showClearDateAction;
+    }
+
+    toggleNoneOption() {
+        this.showNoneOption = !this.showNoneOption;
+    }
+
     reset() {
         this.isEditable = true;
         this.createCard();
diff --git a/docs/core/components/card-view.component.md b/docs/core/components/card-view.component.md
index 3d9c3ef529..cc78df900a 100644
--- a/docs/core/components/card-view.component.md
+++ b/docs/core/components/card-view.component.md
@@ -97,7 +97,9 @@ Defining properties from Typescript:
 
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
+| displayClearAction | `boolean` | true | Toggles whether or not to display clear action. |
 | displayEmpty | `boolean` | true | Toggles whether or not to show empty items in non-editable mode. |
+| displayNoneOption | `boolean` | true | Toggles whether or not to display none option. |
 | editable | `boolean` |  | Toggles whether or not the items can be edited. |
 | properties | [`CardViewItem`](../../../lib/core/card-view/interfaces/card-view-item.interface.ts)`[]` |  | (**required**) Items to show in the card view. |
 
diff --git a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html
index a1eee5b48e..e96fe2d4cd 100644
--- a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html
+++ b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html
@@ -13,6 +13,15 @@
                 (click)="showDatePicker()">
                 <span [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key" *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
             </span>
+
+            <mat-icon *ngIf="showClearAction()"
+                class="adf-date-reset-icon"
+                (click)="onDateClear()"
+                [attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
+                [attr.data-automation-id]="'datepicker-date-clear-' + property.key">
+                clear
+            </mat-icon>
+
             <mat-datetimepicker-toggle
                 [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
                 [attr.data-automation-id]="'datepickertoggle-' + property.key"
diff --git a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
index 17a1307e3f..fc05c11e5d 100644
--- a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
+++ b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
@@ -35,6 +35,24 @@
                 &:hover mat-icon {
                     opacity: 1;
                 }
+
+                .adf-datepicker-toggle {
+                    flex: 1 0 auto;
+                }
+
+                mat-icon.adf-date-reset-icon {
+                    line-height: 10px;
+                    font-size: 16px;
+                    width: 16px;
+                    height: 16px;
+                    position: relative;
+                    top: 4px;
+                    padding-left: 8px;
+                    opacity: 0.3;
+                }
+                &:hover mat-icon.adf-date-reset-icon {
+                    opacity: 1;
+                }
             }
         }
     }
diff --git a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
index a8ce91d7db..74399702c7 100644
--- a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
+++ b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
@@ -116,6 +116,7 @@ describe('CardViewDateItemComponent', () => {
     });
 
     it('should render value when editable:true', () => {
+        component.displayClearAction = false;
         component.editable = true;
         component.property.editable = true;
         fixture.detectChanges();
@@ -203,4 +204,50 @@ describe('CardViewDateItemComponent', () => {
             }
         );
     }));
+
+    it('should render the clear icon in case of editable:true', () => {
+        component.editable = true;
+        component.property.editable = true;
+        component.property.value = 'Jul 10 2017';
+        fixture.detectChanges();
+
+        const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear-${component.property.key}"]`));
+        expect(datePickerClearToggle).not.toBeNull('Clean Icon should be in DOM');
+    });
+
+    it('should not render the clear icon in case of property value empty', () => {
+        component.editable = true;
+        component.property.editable = true;
+        component.property.value = null;
+        fixture.detectChanges();
+
+        const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear--${component.property.key}"]`));
+        expect(datePickerClearToggle).toBeNull('Clean Icon should not be in DOM');
+    });
+
+    it('should not render the clear icon in case displayClearAction is set false', () => {
+        component.editable = true;
+        component.property.editable = true;
+        component.displayClearAction = false;
+        component.property.value = 'Jul 10 2017';
+        fixture.detectChanges();
+
+        const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear--${component.property.key}"]`));
+        expect(datePickerClearToggle).toBeNull('Clean Icon should not be in DOM');
+    });
+
+    it('should remove the property value after a successful clear attempt', async(() => {
+        component.editable = true;
+        component.property.editable = true;
+        component.property.value = 'Jul 10 2017';
+        fixture.detectChanges();
+
+        component.onDateClear();
+
+        fixture.whenStable().then(
+            (updateNotification) => {
+                expect(component.property.value).toBeNull();
+            }
+        );
+    }));
 });
diff --git a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
index 6abe22c955..3c662190bd 100644
--- a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
+++ b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
@@ -52,6 +52,9 @@ export class CardViewDateItemComponent implements OnInit, OnDestroy {
     @Input()
     displayEmpty: boolean = true;
 
+    @Input()
+    displayClearAction: boolean = true;
+
     @ViewChild('datetimePicker')
     public datepicker: MatDatetimepicker<any>;
 
@@ -92,6 +95,10 @@ export class CardViewDateItemComponent implements OnInit, OnDestroy {
         return this.displayEmpty || !this.property.isEmpty();
     }
 
+    showClearAction() {
+        return !this.property.isEmpty() && this.displayClearAction;
+    }
+
     isEditable() {
         return this.editable && this.property.editable;
     }
@@ -111,4 +118,10 @@ export class CardViewDateItemComponent implements OnInit, OnDestroy {
         }
     }
 
+    onDateClear() {
+        this.valueDate = null;
+        this.cardViewUpdateService.update(this.property, null);
+        this.property.value = null;
+    }
+
 }
diff --git a/lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts b/lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts
index 70149952f1..9a2fc35a4f 100644
--- a/lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts
+++ b/lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts
@@ -119,13 +119,17 @@ describe('CardViewItemDispatcherComponent', () => {
             const expectedEditable = false,
                 expectedDisplayEmpty = true,
                 expectedProperty = <CardViewItem> {},
-                expectedCustomInput = 1;
+                expectedCustomInput = 1,
+                expectedDisplayNoneOption = false,
+                expectedDisplayClearAction = false;
 
             component.ngOnChanges({
                 editable: new SimpleChange(true, expectedEditable, false),
                 displayEmpty: new SimpleChange(false, expectedDisplayEmpty, false),
                 property: new SimpleChange(null, expectedProperty, false),
-                customInput: new SimpleChange(0, expectedCustomInput, false)
+                customInput: new SimpleChange(0, expectedCustomInput, false),
+                displayNoneOption: new SimpleChange(true, expectedDisplayNoneOption, false),
+                displayClearAction: new SimpleChange(true, expectedDisplayClearAction, false)
             });
 
             const shinyCustomElementItemComponent = fixture.debugElement.query(By.css('whatever-you-want-to-have')).componentInstance;
@@ -133,6 +137,8 @@ describe('CardViewItemDispatcherComponent', () => {
             expect(shinyCustomElementItemComponent.editable).toBe(expectedEditable);
             expect(shinyCustomElementItemComponent.displayEmpty).toBe(expectedDisplayEmpty);
             expect(shinyCustomElementItemComponent.customInput).toBe(expectedCustomInput);
+            expect(shinyCustomElementItemComponent.displayNoneOption).toBe(expectedDisplayNoneOption);
+            expect(shinyCustomElementItemComponent.displayClearAction).toBe(expectedDisplayClearAction);
         });
     });
 
diff --git a/lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts b/lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts
index 0e6671f080..4955ba7416 100644
--- a/lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts
+++ b/lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts
@@ -42,6 +42,12 @@ export class CardViewItemDispatcherComponent implements OnChanges {
     @Input()
     displayEmpty: boolean = true;
 
+    @Input()
+    displayNoneOption: boolean = true;
+
+    @Input()
+    displayClearAction: boolean = true;
+
     @ViewChild(CardViewContentProxyDirective)
     private content: CardViewContentProxyDirective;
 
@@ -92,6 +98,8 @@ export class CardViewItemDispatcherComponent implements OnChanges {
         this.componentReference.instance.editable = this.editable;
         this.componentReference.instance.property = this.property;
         this.componentReference.instance.displayEmpty = this.displayEmpty;
+        this.componentReference.instance.displayNoneOption = this.displayNoneOption;
+        this.componentReference.instance.displayClearAction = this.displayClearAction;
     }
 
     private proxy(methodName, ...args) {
diff --git a/lib/core/card-view/components/card-view-selectitem/card-view-selectitem.component.html b/lib/core/card-view/components/card-view-selectitem/card-view-selectitem.component.html
index 1cd47b7254..508135a440 100644
--- a/lib/core/card-view/components/card-view-selectitem/card-view-selectitem.component.html
+++ b/lib/core/card-view/components/card-view-selectitem/card-view-selectitem.component.html
@@ -4,6 +4,7 @@
     <div *ngIf="isEditable()">
         <mat-form-field>
             <mat-select [(value)]="value" (selectionChange)="onChange($event)" data-automation-class="select-box">
+              <mat-option *ngIf="showNoneOption()">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
               <mat-option *ngFor="let option of getOptions() | async" [value]="option.key">
                 {{ option.label | translate }}
               </mat-option>
diff --git a/lib/core/card-view/components/card-view-selectitem/card-view-selectitem.component.ts b/lib/core/card-view/components/card-view-selectitem/card-view-selectitem.component.ts
index c28f30779a..f4c374285b 100644
--- a/lib/core/card-view/components/card-view-selectitem/card-view-selectitem.component.ts
+++ b/lib/core/card-view/components/card-view-selectitem/card-view-selectitem.component.ts
@@ -34,6 +34,9 @@ export class CardViewSelectItemComponent implements OnChanges {
 
     @Input() options$: Observable<CardViewSelectItemOption<string>[]>;
 
+    @Input()
+    displayNoneOption: boolean = true;
+
     value: string;
 
     constructor(private cardViewUpdateService: CardViewUpdateService) {}
@@ -51,7 +54,12 @@ export class CardViewSelectItemComponent implements OnChanges {
     }
 
     onChange(event: MatSelectChange): void {
-        this.cardViewUpdateService.update(this.property, event.value);
-        this.property.value = event.value;
+        const selectedOption = event.value !== undefined ? event.value : null;
+        this.cardViewUpdateService.update(this.property, selectedOption);
+        this.property.value = selectedOption;
+    }
+
+    showNoneOption() {
+        return this.displayNoneOption;
     }
 }
diff --git a/lib/core/card-view/components/card-view/card-view.component.html b/lib/core/card-view/components/card-view/card-view.component.html
index e362d0552f..eebbed91c9 100644
--- a/lib/core/card-view/components/card-view/card-view.component.html
+++ b/lib/core/card-view/components/card-view/card-view.component.html
@@ -4,7 +4,9 @@
             <adf-card-view-item-dispatcher
                 [property]="property"
                 [editable]="editable"
-                [displayEmpty]="displayEmpty">
+                [displayEmpty]="displayEmpty"
+                [displayNoneOption]="displayNoneOption"
+                [displayClearAction]="displayClearAction">
             </adf-card-view-item-dispatcher>
         </div>
     </div>
diff --git a/lib/core/card-view/components/card-view/card-view.component.ts b/lib/core/card-view/components/card-view/card-view.component.ts
index 3c6b631c33..2199e627ed 100644
--- a/lib/core/card-view/components/card-view/card-view.component.ts
+++ b/lib/core/card-view/components/card-view/card-view.component.ts
@@ -35,4 +35,12 @@ export class CardViewComponent {
     /** Toggles whether or not to show empty items in non-editable mode. */
     @Input()
     displayEmpty: boolean = true;
+
+    /** Toggles whether or not to display none option. */
+    @Input()
+    displayNoneOption: boolean = true;
+
+    /** Toggles whether or not to display clear action. */
+    @Input()
+    displayClearAction: boolean = true;
 }
diff --git a/lib/core/i18n/en.json b/lib/core/i18n/en.json
index 8ef8e7a3ca..46d6b0cc29 100644
--- a/lib/core/i18n/en.json
+++ b/lib/core/i18n/en.json
@@ -161,6 +161,7 @@
         "NAME": "Name",
         "VALUE": "Value"
       },
+      "NONE": "None",
       "VALIDATORS": {
         "FLOAT_VALIDATION_ERROR": "Use a number format",
         "INT_VALIDATION_ERROR": "Use an integer format"
@@ -184,6 +185,7 @@
         "EDIT": "Edit",
         "SAVE": "Save",
         "CANCEL": "Cancel",
+        "CLEAR": "Clear",
         "TOGGLE": "Toggle value"
       }
     }
diff --git a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.html b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.html
index ead649fe3e..43ee89ed70 100644
--- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.html
@@ -5,7 +5,8 @@
         <mat-card-content>
             <adf-card-view
                 [properties]="properties"
-                [editable]="isTaskEditable()">
+                [editable]="isTaskEditable()"
+                [displayClearAction]="displayDateClearAction">
             </adf-card-view>
         </mat-card-content>
     </mat-card>
diff --git a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts
index b3e67a567f..8e8f29093a 100644
--- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts
+++ b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts
@@ -62,6 +62,7 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy {
     parentTaskName: string;
     dateFormat: string;
     dateLocale: string;
+    displayDateClearAction = false;
 
     private onDestroy$ = new Subject<boolean>();
 
diff --git a/lib/process-services/task-list/components/task-header.component.html b/lib/process-services/task-list/components/task-header.component.html
index 9b7a297b2a..4246928719 100644
--- a/lib/process-services/task-list/components/task-header.component.html
+++ b/lib/process-services/task-list/components/task-header.component.html
@@ -1,6 +1,6 @@
 <mat-card *ngIf="taskDetails" class="adf-card-container">
     <mat-card-content>
-        <adf-card-view [properties]="properties" [editable]="!isCompleted()"></adf-card-view>
+        <adf-card-view [properties]="properties" [editable]="!isCompleted()" [displayClearAction]="displayDateClearAction"></adf-card-view>
     </mat-card-content>
 
     <mat-card-actions class="adf-controls">
diff --git a/lib/process-services/task-list/components/task-header.component.ts b/lib/process-services/task-list/components/task-header.component.ts
index 7bd74af996..f2bc4e8b14 100644
--- a/lib/process-services/task-list/components/task-header.component.ts
+++ b/lib/process-services/task-list/components/task-header.component.ts
@@ -58,6 +58,7 @@ export class TaskHeaderComponent implements OnChanges, OnInit {
 
     properties: CardViewItem [];
     inEdit: boolean = false;
+    displayDateClearAction = false;
     dateFormat: string;
     dateLocale: string;