diff --git a/components/date-picker/date-range-picker.component.html b/components/date-picker/date-range-picker.component.html index 21eda07a6e7..89b61e6855e 100644 --- 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)" > | 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 }; + } }