diff --git a/components/date-picker/month-picker.component.spec.ts b/components/date-picker/month-picker.component.spec.ts
index 19391e8e5de..e0109c4c777 100644
--- a/components/date-picker/month-picker.component.spec.ts
+++ b/components/date-picker/month-picker.component.spec.ts
@@ -9,6 +9,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import * as isBefore from 'date-fns/is_before';
 import { dispatchMouseEvent } from '../core/testing';
+import { NzInputModule } from '../input/nz-input.module';
 import { NzDatePickerModule } from './date-picker.module';
 import { CandyDate } from './lib/candy-date';
 import { PickerResultSingle } from './standard-types';
@@ -24,7 +25,7 @@ describe('NzMonthPickerComponent', () => {
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      imports     : [ FormsModule, NoopAnimationsModule, NzDatePickerModule ],
+      imports     : [FormsModule, NoopAnimationsModule, NzDatePickerModule, NzInputModule ],
       providers   : [],
       declarations: [
         NzTestMonthPickerComponent
@@ -146,10 +147,21 @@ describe('NzMonthPickerComponent', () => {
     it('should support nzClassName', () => {
       const className = fixtureInstance.nzClassName = 'my-test-class';
       fixture.detectChanges();
-      const picker = debugElement.query(By.css('.ant-calendar-picker')).nativeElement as HTMLElement;
+      const picker = debugElement.queryAll(By.css('.ant-calendar-picker'))[1].nativeElement as HTMLElement;
       expect(picker.classList.contains(className)).toBeTruthy();
     });
 
+    it('should support nzCompact', () => {
+      fixtureInstance.useSuite = 4;
+
+      fixture.detectChanges();
+      const pickerInput = debugElement.query(By.css('input.ant-calendar-picker-input')).nativeElement as HTMLElement;
+      expect(pickerInput).not.toBeNull();
+      const compStyles = window.getComputedStyle(pickerInput);
+      expect(compStyles.getPropertyValue('border-top-right-radius') === '0px').toBeTruthy();
+      expect(compStyles.getPropertyValue('border-bottom-right-radius') === '0px').toBeTruthy();
+    });
+
     it('should support nzDisabledDate', fakeAsync(() => {
       fixture.detectChanges();
       const compareDate = new Date('2018-11-15 00:00:00');
@@ -441,11 +453,17 @@ describe('NzMonthPickerComponent', () => {
 
       <!-- Suite 3 -->
       <nz-month-picker *ngSwitchCase="3" nzOpen [(ngModel)]="modelValue"></nz-month-picker>
+
+      <!-- Suite 4 -->
+      <nz-input-group *ngSwitchCase="4" nzCompact>
+        <nz-month-picker style="width: 200px;"></nz-month-picker>
+        <input nz-input type="text" style="width: 200px;" />
+      </nz-input-group>
     </ng-container>
   `
 })
 class NzTestMonthPickerComponent {
-  useSuite: 1 | 2 | 3;
+  useSuite: 1 | 2 | 3 | 4;
   @ViewChild('tplExtraFooter') tplExtraFooter: TemplateRef<void>;
 
   // --- Suite 1
diff --git a/components/date-picker/month-picker.component.ts b/components/date-picker/month-picker.component.ts
index 169f0ab9ea9..479257912f4 100644
--- a/components/date-picker/month-picker.component.ts
+++ b/components/date-picker/month-picker.component.ts
@@ -12,7 +12,8 @@ import { HeaderPickerComponent, SupportHeaderPanel } from './header-picker.compo
     useExisting: forwardRef(() => NzMonthPickerComponent)
   }],
   host               : {
-    '[class.ant-checkbox-group]': 'true'
+    '[class.ant-checkbox-group]': 'true',
+    '[class.ant-calendar-picker]': 'true'
   }
 })
 
diff --git a/components/date-picker/year-picker.component.spec.ts b/components/date-picker/year-picker.component.spec.ts
index 23834df1b32..399fac46f55 100644
--- a/components/date-picker/year-picker.component.spec.ts
+++ b/components/date-picker/year-picker.component.spec.ts
@@ -9,6 +9,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import * as isBefore from 'date-fns/is_before';
 import { dispatchMouseEvent } from '../core/testing';
+import { NzInputModule } from '../input/nz-input.module';
 import { NzDatePickerModule } from './date-picker.module';
 import { CandyDate } from './lib/candy-date';
 import { PickerResultSingle } from './standard-types';
@@ -24,7 +25,7 @@ describe('NzYearPickerComponent', () => {
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      imports     : [ FormsModule, NoopAnimationsModule, NzDatePickerModule ],
+      imports     : [ FormsModule, NoopAnimationsModule, NzDatePickerModule, NzInputModule ],
       providers   : [],
       declarations: [
         NzTestYearPickerComponent
@@ -146,10 +147,21 @@ describe('NzYearPickerComponent', () => {
     it('should support nzClassName', () => {
       const className = fixtureInstance.nzClassName = 'my-test-class';
       fixture.detectChanges();
-      const picker = debugElement.query(By.css('.ant-calendar-picker')).nativeElement as HTMLElement;
+      const picker = debugElement.queryAll(By.css('.ant-calendar-picker'))[1].nativeElement as HTMLElement;
       expect(picker.classList.contains(className)).toBeTruthy();
     });
 
+    it('should support nzCompact', () => {
+      fixtureInstance.useSuite = 4;
+
+      fixture.detectChanges();
+      const pickerInput = debugElement.query(By.css('input.ant-calendar-picker-input')).nativeElement as HTMLElement;
+      expect(pickerInput).not.toBeNull();
+      const compStyles = window.getComputedStyle(pickerInput);
+      expect(compStyles.getPropertyValue('border-top-right-radius') === '0px').toBeTruthy();
+      expect(compStyles.getPropertyValue('border-bottom-right-radius') === '0px').toBeTruthy();
+    });
+
     it('should support nzLocale', () => {
       const featureKey = 'TEST_PLACEHOLDER';
       fixtureInstance.nzLocale = { lang: { placeholder: featureKey } };
@@ -386,11 +398,18 @@ describe('NzYearPickerComponent', () => {
 
       <!-- Suite 3 -->
       <nz-year-picker *ngSwitchCase="3" nzOpen [(ngModel)]="modelValue"></nz-year-picker>
+
+      <!-- Suite 4 -->
+      <nz-input-group *ngSwitchCase="4" nzCompact>
+        <nz-year-picker style="width: 200px;"></nz-year-picker>
+        <input nz-input type="text" style="width: 200px;" />
+      </nz-input-group>
+
     </ng-container>
   `
 })
 class NzTestYearPickerComponent {
-  useSuite: 1 | 2 | 3;
+  useSuite: 1 | 2 | 3 | 4;
   @ViewChild('tplExtraFooter') tplExtraFooter: TemplateRef<void>;
 
   // --- Suite 1
diff --git a/components/date-picker/year-picker.component.ts b/components/date-picker/year-picker.component.ts
index 5d06a074de7..8a9392e7970 100644
--- a/components/date-picker/year-picker.component.ts
+++ b/components/date-picker/year-picker.component.ts
@@ -12,7 +12,8 @@ import { HeaderPickerComponent, SupportHeaderPanel } from './header-picker.compo
     useExisting: forwardRef(() => NzYearPickerComponent)
   }],
   host               : {
-    '[class.ant-checkbox-group]': 'true'
+    '[class.ant-checkbox-group]': 'true',
+    '[class.ant-calendar-picker]': 'true'
   }
 })