fix(module:date-picker): use fixed width when "nzShowTime" settled fo…

…r picker (#2236)
NG-ZORRO · Oct 11, 2018 · 463a14c · 463a14c
1 parent c3c2d26
commit 463a14c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/components/date-picker/date-range-picker.component.html b/components/date-picker/date-range-picker.component.html
@@ -10,7 +10,7 @@
   [className]="nzClassName"
   [placeholder]="nzPlaceHolder"
   [size]="nzSize"
-  [style]="nzStyle"
+  [style]="pickerStyle"
   (openChange)="onOpenChange($event)"
 >
   <date-range-popup *ngIf="realOpenState"

diff --git a/components/date-picker/date-range-picker.component.ts b/components/date-picker/date-range-picker.component.ts
@@ -36,6 +36,7 @@ export class DateRangePickerComponent extends AbstractPickerComponent implements
     return !this.isRange && this.nzShowToday;
   }
 
+  pickerStyle: object; // Final picker style that contains width fix corrections etc.
   extraFooter: TemplateRef<void> | string;
 
   constructor(i18n: NzI18nService, private logger: LoggerService) {
@@ -61,6 +62,10 @@ export class DateRangePickerComponent extends AbstractPickerComponent implements
     if (changes.nzRenderExtraFooter) {
       this.extraFooter = valueFunctionProp(this.nzRenderExtraFooter);
     }
+
+    if (changes.nzShowTime || changes.nzStyle) {
+      this.setFixedPickerStyle();
+    }
   }
 
   // If has no timepicker and the user select a date by date panel, then close picker
@@ -93,4 +98,14 @@ export class DateRangePickerComponent extends AbstractPickerComponent implements
   onOpenChange(open: boolean): void {
     this.nzOnOpenChange.emit(open);
   }
+
+  // Setup fixed style for picker
+  private setFixedPickerStyle(): void {
+    const showTimeFixes: { width?: string } = {};
+    if (this.nzShowTime) {
+      showTimeFixes.width = this.isRange ? '350px' : '195px';
+    }
+
+    this.pickerStyle = { ...showTimeFixes, ...this.nzStyle };
+  }
 }