diff --git a/components/date-picker/date-picker.component.html b/components/date-picker/date-picker.component.html
deleted file mode 100644
index 694e4c27bc0..00000000000
--- a/components/date-picker/date-picker.component.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<div
-  nz-picker
-  [isRange]="isRange"
-  [open]="nzOpen"
-  [separator]="nzSeparator"
-  [disabled]="nzDisabled"
-  [format]="nzFormat"
-  [allowClear]="nzAllowClear"
-  [autoFocus]="nzAutoFocus"
-  [placeholder]="nzPlaceHolder"
-  [ngClass]="nzClassName"
-  style="display: inherit; align-items: center; width: 100%;"
-  [ngStyle]="nzStyle"
-  [dropdownClassName]="nzDropdownClassName"
-  [popupStyle]="nzPopupStyle"
-  [noAnimation]="noAnimation?.nzNoAnimation"
-  [suffixIcon]="nzSuffixIcon"
-  (openChange)="onOpenChange($event)"
-  (focusChange)="onFocusChange($event)"
->
-  <date-range-popup
-    *ngIf="realOpenState"
-    [isRange]="isRange"
-    [defaultPickerValue]="nzDefaultPickerValue"
-    [showWeek]="showWeek"
-    [panelMode]="nzMode"
-    (panelModeChange)="onPanelModeChange($event)"
-    (calendarChange)="onCalendarChange($event)"
-    [locale]="nzLocale?.lang"
-    [showToday]="realShowToday"
-    [showTime]="nzShowTime"
-    [format]="nzFormat"
-    [dateRender]="nzDateRender"
-    [disabledDate]="nzDisabledDate"
-    [disabledTime]="nzDisabledTime"
-    [placeholder]="nzPlaceHolder"
-    [extraFooter]="extraFooter"
-    [ranges]="nzRanges"
-    (resultOk)="onResultOk()"
-  ></date-range-popup>
-</div>
diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts
index 67fad41c1ad..6cc1ba508d0 100644
--- a/components/date-picker/date-picker.component.ts
+++ b/components/date-picker/date-picker.component.ts
@@ -52,13 +52,56 @@ const NZ_CONFIG_COMPONENT_NAME = 'datePicker';
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'nz-date-picker,nz-week-picker,nz-month-picker,nz-year-picker,nz-range-picker',
   exportAs: 'nzDatePicker',
-  templateUrl: './date-picker.component.html',
+  template: `
+    <div
+      nz-picker
+      [isRange]="isRange"
+      [open]="nzOpen"
+      [separator]="nzSeparator"
+      [disabled]="nzDisabled"
+      [format]="nzFormat"
+      [allowClear]="nzAllowClear"
+      [autoFocus]="nzAutoFocus"
+      [placeholder]="nzPlaceHolder"
+      [ngClass]="nzClassName"
+      style="display: inherit; align-items: center; width: 100%;"
+      [ngStyle]="nzStyle"
+      [dropdownClassName]="nzDropdownClassName"
+      [popupStyle]="nzPopupStyle"
+      [noAnimation]="noAnimation?.nzNoAnimation"
+      [suffixIcon]="nzSuffixIcon"
+      (openChange)="onOpenChange($event)"
+      (focusChange)="onFocusChange($event)"
+    >
+      <date-range-popup
+        *ngIf="realOpenState"
+        [isRange]="isRange"
+        [defaultPickerValue]="nzDefaultPickerValue"
+        [showWeek]="showWeek"
+        [panelMode]="nzMode"
+        (panelModeChange)="onPanelModeChange($event)"
+        (calendarChange)="onCalendarChange($event)"
+        [locale]="nzLocale?.lang"
+        [showToday]="realShowToday"
+        [showTime]="nzShowTime"
+        [format]="nzFormat"
+        [dateRender]="nzDateRender"
+        [disabledDate]="nzDisabledDate"
+        [disabledTime]="nzDisabledTime"
+        [placeholder]="nzPlaceHolder"
+        [extraFooter]="extraFooter"
+        [ranges]="nzRanges"
+        (resultOk)="onResultOk()"
+      ></date-range-popup>
+    </div>
+  `,
   host: {
     '[class.ant-picker]': `true`,
     '[class.ant-picker-range]': `isRange`,
     '[class.ant-picker-large]': `nzSize === 'large'`,
     '[class.ant-picker-small]': `nzSize === 'small'`,
-    '[class.ant-picker-disabled]': `nzDisabled`
+    '[class.ant-picker-disabled]': `nzDisabled`,
+    '(click)': 'picker.onClickInputBox($event)'
   },
   providers: [
     DatePickerService,
diff --git a/components/date-picker/picker.component.ts b/components/date-picker/picker.component.ts
index 1d6943b3ffa..3c4cc461513 100644
--- a/components/date-picker/picker.component.ts
+++ b/components/date-picker/picker.component.ts
@@ -62,7 +62,6 @@ import { PREFIX_CLASS } from './util';
         [(ngModel)]="inputValue"
         placeholder="{{ getPlaceholder() }}"
         [size]="inputSize"
-        (click)="onClickInputBox()"
         (focus)="onFocus()"
         (blur)="onBlur()"
         (input)="onInputKeyup($event)"
@@ -95,7 +94,7 @@ import { PREFIX_CLASS } from './util';
         #rangePickerInput
         [disabled]="disabled"
         [size]="inputSize"
-        (click)="onClickInputBox(partType)"
+        (click)="onClickInputBox($event, partType)"
         (blur)="onBlur()"
         (input)="onInputKeyup($event, false)"
         (focus)="onFocus(partType)"
@@ -350,7 +349,9 @@ export class NzPickerComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     return !this.disabled && !this.isEmptyValue(this.datePickerService.value) && this.allowClear;
   }
 
-  onClickInputBox(partType?: RangePartType): void {
+  onClickInputBox(event: MouseEvent, partType?: RangePartType): void {
+    event.stopPropagation();
+
     if (!this.disabled && !this.isOpenHandledByUser()) {
       this.showOverlay();
     }
diff --git a/components/time-picker/time-picker.component.ts b/components/time-picker/time-picker.component.ts
index 0e334aabc74..42b3d122191 100644
--- a/components/time-picker/time-picker.component.ts
+++ b/components/time-picker/time-picker.component.ts
@@ -49,7 +49,6 @@ const NZ_CONFIG_COMPONENT_NAME = 'timePicker';
         [placeholder]="nzPlaceHolder || ('TimePicker.placeholder' | nzI18n)"
         [(ngModel)]="value"
         [disabled]="nzDisabled"
-        (click)="open()"
         (focus)="onFocus(true)"
         (blur)="onFocus(false)"
       />
@@ -58,7 +57,7 @@ const NZ_CONFIG_COMPONENT_NAME = 'timePicker';
           <i nz-icon [nzType]="nzSuffixIcon"></i>
         </ng-container>
       </span>
-      <span *ngIf="nzAllowEmpty && value" class="ant-picker-clear" (click)="onClickClearBtn()">
+      <span *ngIf="nzAllowEmpty && value" class="ant-picker-clear" (click)="onClickClearBtn($event)">
         <i nz-icon nzType="close-circle" nzTheme="fill" [attr.aria-label]="nzClearText" [attr.title]="nzClearText"></i>
       </span>
     </div>
@@ -108,7 +107,8 @@ const NZ_CONFIG_COMPONENT_NAME = 'timePicker';
     '[class.ant-picker-large]': `nzSize === 'large'`,
     '[class.ant-picker-small]': `nzSize === 'small'`,
     '[class.ant-picker-disabled]': `nzDisabled`,
-    '[class.ant-picker-focused]': `focused`
+    '[class.ant-picker-focused]': `focused`,
+    '(click)': 'open()'
   },
   animations: [slideMotion],
   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NzTimePickerComponent, multi: true }]
@@ -198,7 +198,8 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte
     }
   }
 
-  onClickClearBtn(): void {
+  onClickClearBtn(event: MouseEvent): void {
+    event.stopPropagation();
     this.setValue(null);
   }