diff --git a/components/core/overlay/overlay-position-map.ts b/components/core/overlay/overlay-position-map.ts
index 07bc1a02ce8..ac2797b8aa2 100644
--- a/components/core/overlay/overlay-position-map.ts
+++ b/components/core/overlay/overlay-position-map.ts
@@ -91,20 +91,20 @@ export const POSITION_MAP: { [key: string]: ConnectionPositionPair } = {
export const DEFAULT_4_POSITIONS = _objectValues([ POSITION_MAP.top, POSITION_MAP.right, POSITION_MAP.bottom, POSITION_MAP.left]);
export const DEFAULT_DROPDOWN_POSITIONS = _objectValues([ POSITION_MAP.bottomLeft, POSITION_MAP.topLeft ]);
-export const DEFAULT_DATEPICKER_POSITIONS = [
- {
- originX : 'start',
- originY : 'top',
- overlayX: 'start',
- overlayY: 'top',
- },
- {
- originX : 'start',
- originY : 'bottom',
- overlayX: 'start',
- overlayY: 'bottom',
- }
-] as ConnectionPositionPair[];
+// export const DEFAULT_DATEPICKER_POSITIONS = [
+// {
+// originX : 'start',
+// originY : 'top',
+// overlayX: 'start',
+// overlayY: 'top',
+// },
+// {
+// originX : 'start',
+// originY : 'bottom',
+// overlayX: 'start',
+// overlayY: 'bottom',
+// }
+// ] as ConnectionPositionPair[];
export const DEFAULT_MENTION_POSITIONS = [
POSITION_MAP.bottomLeft,
diff --git a/components/date-picker/abstract-picker.component.ts b/components/date-picker/abstract-picker.component.ts
index 9b5b789fa87..4181a15259b 100644
--- a/components/date-picker/abstract-picker.component.ts
+++ b/components/date-picker/abstract-picker.component.ts
@@ -35,7 +35,7 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, Cont
@Input() nzClassName: string;
@Input() nzDisabledDate: (d: Date) => boolean;
@Input() nzLocale: NzDatePickerI18nInterface;
- @Input() nzPlaceholder: string | string[];
+ @Input() nzPlaceHolder: string | string[];
@Input() nzPopupStyle: object = POPUP_STYLE_PATCH;
@Input() nzDropdownClassName: string;
@Input() nzSize: 'large' | 'small';
@@ -71,8 +71,8 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, Cont
this.initValue();
// Default placeholder
- if (!this.nzPlaceholder) {
- this.nzPlaceholder = this.isRange ? this.nzLocale.lang.rangePlaceholder : this.nzLocale.lang.placeholder;
+ if (!this.nzPlaceHolder) {
+ this.nzPlaceHolder = this.isRange ? this.nzLocale.lang.rangePlaceholder : this.nzLocale.lang.placeholder;
}
}
diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts
index 77920505be5..f0705edbc55 100644
--- a/components/date-picker/date-picker.component.spec.ts
+++ b/components/date-picker/date-picker.component.spec.ts
@@ -163,8 +163,8 @@ describe('NzDatePickerComponent', () => {
expect(getPickerTrigger().getAttribute('placeholder')).toBe(featureKey);
});
- it('should support nzPlaceholder', () => {
- const featureKey = fixtureInstance.nzPlaceholder = 'TEST_PLACEHOLDER';
+ it('should support nzPlaceHolder', () => {
+ const featureKey = fixtureInstance.nzPlaceHolder = 'TEST_PLACEHOLDER';
fixture.detectChanges();
expect(getPickerTrigger().getAttribute('placeholder')).toBe(featureKey);
});
@@ -687,7 +687,7 @@ describe('NzDatePickerComponent', () => {
[nzClassName]="nzClassName"
[nzDisabledDate]="nzDisabledDate"
[nzLocale]="nzLocale"
- [nzPlaceholder]="nzPlaceholder"
+ [nzPlaceHolder]="nzPlaceHolder"
[nzPopupStyle]="nzPopupStyle"
[nzDropdownClassName]="nzDropdownClassName"
[nzSize]="nzSize"
@@ -734,7 +734,7 @@ class NzTestDatePickerComponent {
nzClassName;
nzDisabledDate;
nzLocale;
- nzPlaceholder;
+ nzPlaceHolder;
nzPopupStyle;
nzDropdownClassName;
nzSize;
diff --git a/components/date-picker/date-range-picker.component.html b/components/date-picker/date-range-picker.component.html
index 650c9a5f819..21eda07a6e7 100644
--- a/components/date-picker/date-range-picker.component.html
+++ b/components/date-picker/date-range-picker.component.html
@@ -8,7 +8,7 @@
[allowClear]="nzAllowClear"
[autoFocus]="nzAutoFocus"
[className]="nzClassName"
- [placeholder]="nzPlaceholder"
+ [placeholder]="nzPlaceHolder"
[size]="nzSize"
[style]="nzStyle"
(openChange)="onOpenChange($event)"
@@ -27,7 +27,7 @@
[dateRender]="nzDateRender"
[disabledDate]="nzDisabledDate"
[disabledTime]="nzDisabledTime"
- [placeholder]="nzPlaceholder"
+ [placeholder]="nzPlaceHolder"
[dropdownClassName]="nzDropdownClassName"
[popupStyle]="nzPopupStyle"
[extraFooter]="extraFooter"
diff --git a/components/date-picker/demo/basic.ts b/components/date-picker/demo/basic.ts
index 032bcaf6288..6b98d20107d 100644
--- a/components/date-picker/demo/basic.ts
+++ b/components/date-picker/demo/basic.ts
@@ -7,11 +7,11 @@ import * as getISOWeek from 'date-fns/get_iso_week';
template: `
-
+
-
+
`,
styles : [ `
:host ::ng-deep .ant-calendar-picker {
diff --git a/components/date-picker/demo/disabled-date.ts b/components/date-picker/demo/disabled-date.ts
index 65f927d1735..445a1006c8e 100644
--- a/components/date-picker/demo/disabled-date.ts
+++ b/components/date-picker/demo/disabled-date.ts
@@ -12,7 +12,7 @@ import * as setHours from 'date-fns/set_hours';
[nzShowTime]="{ nzDefaultOpenValue: timeDefaultValue }">
-
+
-
+
`,
styles: [`
:host ::ng-deep .ant-calendar-picker {
diff --git a/components/date-picker/demo/size.ts b/components/date-picker/demo/size.ts
index 2c5199dc348..5bbb6a8ffe3 100644
--- a/components/date-picker/demo/size.ts
+++ b/components/date-picker/demo/size.ts
@@ -11,11 +11,11 @@ import { Component } from '@angular/core';
-
+
-
+
`,
styles: [`
:host ::ng-deep .ant-calendar-picker {
diff --git a/components/date-picker/demo/start-end.ts b/components/date-picker/demo/start-end.ts
index 8e550d188cd..ad67bc46bd7 100644
--- a/components/date-picker/demo/start-end.ts
+++ b/components/date-picker/demo/start-end.ts
@@ -8,7 +8,7 @@ import { Component } from '@angular/core';
nzShowTime
nzFormat="yyyy-MM-dd HH:mm:ss"
[(ngModel)]="startValue"
- nzPlaceholder="Start"
+ nzPlaceHolder="Start"
(ngModelChange)="onStartChange($event)"
(nzOnOpenChange)="handleStartOpenChange($event)"
>
@@ -17,7 +17,7 @@ import { Component } from '@angular/core';
nzShowTime
nzFormat="yyyy-MM-dd HH:mm:ss"
[(ngModel)]="endValue"
- nzPlaceholder="End"
+ nzPlaceHolder="End"
[nzOpen]="endOpen"
(ngModelChange)="onEndChange($event)"
(nzOnOpenChange)="handleEndOpenChange($event)"
diff --git a/components/date-picker/demo/time.ts b/components/date-picker/demo/time.ts
index 79b28a141a0..0ad1c789385 100644
--- a/components/date-picker/demo/time.ts
+++ b/components/date-picker/demo/time.ts
@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
@@ -14,7 +14,7 @@ import { Component } from '@angular/core';
diff --git a/components/date-picker/doc/index.en-US.md b/components/date-picker/doc/index.en-US.md
index b9a36f8dc84..18a66a90a7c 100644
--- a/components/date-picker/doc/index.en-US.md
+++ b/components/date-picker/doc/index.en-US.md
@@ -44,7 +44,7 @@ The following APIs are shared by nz-date-picker, nz-month-picker, nz-range-picke
| nzDisabledDate | specify the date that cannot be selected | (current: Date) => boolean | - |
| nzLocale | localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| nzOpen | open state of picker | boolean | - |
-| nzPlaceholder | placeholder of date input | string / string[] | - |
+| nzPlaceHolder | placeholder of date input | string / string[] | - |
| nzPopupStyle | to customize the style of the popup calendar | object | {} |
| nzDropdownClassName | to customize the className of the popup calendar | string | - |
| nzSize | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | string | - |
diff --git a/components/date-picker/doc/index.zh-CN.md b/components/date-picker/doc/index.zh-CN.md
index 9d4e235e300..aa1e0249f72 100644
--- a/components/date-picker/doc/index.zh-CN.md
+++ b/components/date-picker/doc/index.zh-CN.md
@@ -45,7 +45,7 @@ registerLocaleData(zh);
| nzDisabledDate | 不可选择的日期 | (current: Date) => boolean | 无 |
| nzLocale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| nzOpen | 控制弹层是否展开 | boolean | - |
-| nzPlaceholder | 输入框提示文字 | string / string[] | - |
+| nzPlaceHolder | 输入框提示文字 | string / string[] | - |
| nzPopupStyle | 额外的弹出日历样式 | object | {} |
| nzDropdownClassName | 额外的弹出日历 className | string | - |
| nzSize | 输入框大小,`large` 高度为 40px,`small` 为 24px,默认是 32px | string | 无 |
diff --git a/components/date-picker/month-picker.component.html b/components/date-picker/month-picker.component.html
index eb0af731f15..e23c8bbff4b 100644
--- a/components/date-picker/month-picker.component.html
+++ b/components/date-picker/month-picker.component.html
@@ -8,7 +8,7 @@
[allowClear]="nzAllowClear"
[autoFocus]="nzAutoFocus"
[className]="nzClassName"
- [placeholder]="nzPlaceholder"
+ [placeholder]="nzPlaceHolder"
[size]="nzSize"
[style]="nzStyle"
(openChange)="onOpenChange($event)"
diff --git a/components/date-picker/month-picker.component.spec.ts b/components/date-picker/month-picker.component.spec.ts
index 7cb5d0db330..19391e8e5de 100644
--- a/components/date-picker/month-picker.component.spec.ts
+++ b/components/date-picker/month-picker.component.spec.ts
@@ -175,8 +175,8 @@ describe('NzMonthPickerComponent', () => {
expect(getPickerTrigger().getAttribute('placeholder')).toBe(featureKey);
});
- it('should support nzPlaceholder', () => {
- const featureKey = fixtureInstance.nzPlaceholder = 'TEST_PLACEHOLDER';
+ it('should support nzPlaceHolder', () => {
+ const featureKey = fixtureInstance.nzPlaceHolder = 'TEST_PLACEHOLDER';
fixture.detectChanges();
expect(getPickerTrigger().getAttribute('placeholder')).toBe(featureKey);
});
@@ -418,7 +418,7 @@ describe('NzMonthPickerComponent', () => {
[nzClassName]="nzClassName"
[nzDisabledDate]="nzDisabledDate"
[nzLocale]="nzLocale"
- [nzPlaceholder]="nzPlaceholder"
+ [nzPlaceHolder]="nzPlaceHolder"
[nzPopupStyle]="nzPopupStyle"
[nzDropdownClassName]="nzDropdownClassName"
[nzSize]="nzSize"
@@ -455,7 +455,7 @@ class NzTestMonthPickerComponent {
nzClassName;
nzDisabledDate;
nzLocale;
- nzPlaceholder;
+ nzPlaceHolder;
nzPopupStyle;
nzDropdownClassName;
nzSize;
diff --git a/components/date-picker/month-picker.component.ts b/components/date-picker/month-picker.component.ts
index 05072b03a6b..320f0d61cfb 100644
--- a/components/date-picker/month-picker.component.ts
+++ b/components/date-picker/month-picker.component.ts
@@ -21,7 +21,7 @@ import { PanelMode, PickerResult } from './standard-types';
})
export class NzMonthPickerComponent extends AbstractPickerComponent implements OnChanges {
- @Input() nzPlaceholder: string;
+ @Input() nzPlaceHolder: string;
@Input() nzRenderExtraFooter: FunctionProp | string>;
@Input() nzDefaultValue: CandyDate;
diff --git a/components/date-picker/picker.component.html b/components/date-picker/picker.component.html
index 200ddb8f459..ea21016c664 100644
--- a/components/date-picker/picker.component.html
+++ b/components/date-picker/picker.component.html
@@ -67,11 +67,12 @@
(backdropClick)="onClickBackdrop()"
>
diff --git a/components/date-picker/picker.component.ts b/components/date-picker/picker.component.ts
index 185c5660179..0e6afa46a70 100644
--- a/components/date-picker/picker.component.ts
+++ b/components/date-picker/picker.component.ts
@@ -18,7 +18,6 @@ import {
} from '@angular/core';
import { dropDownAnimation } from '../core/animation/dropdown-animations';
-import { DEFAULT_DATEPICKER_POSITIONS } from '../core/overlay/overlay-position-map';
import { NzI18nService } from '../i18n/nz-i18n.service';
import { CandyDate } from './lib/candy-date';
@@ -71,9 +70,23 @@ export class NzPickerComponent implements OnInit, AfterViewInit {
originY : 'bottom',
overlayX: 'start',
overlayY: 'bottom'
+ },
+ {
+ originX : 'end',
+ originY : 'top',
+ overlayX: 'end',
+ overlayY: 'top'
+ },
+ {
+ originX : 'end',
+ originY : 'bottom',
+ overlayX: 'end',
+ overlayY: 'bottom'
}
] as ConnectionPositionPair[];
- currentPosition: 'top' | 'bottom' = 'bottom';
+ dropdownAnimation: 'top' | 'bottom' = 'bottom';
+ currentPositionX: 'start' | 'end' = 'start';
+ currentPositionY: 'top' | 'bottom' = 'top';
// get valueReadable(): string {
// return this.value && this.i18n.formatDateCompatible(this.value.nativeDate, this.format);
// }
@@ -124,7 +137,9 @@ export class NzPickerComponent implements OnInit, AfterViewInit {
// All other components like "nz-dropdown" which depends on overlay also has the same issue.
// See: https://github.com/NG-ZORRO/ng-zorro-antd/issues/1429
onPositionChange(position: ConnectedOverlayPositionChange): void {
- this.currentPosition = position.connectionPair.originY === 'top' ? 'bottom' : 'top';
+ this.dropdownAnimation = position.connectionPair.originY === 'top' ? 'bottom' : 'top';
+ this.currentPositionX = position.connectionPair.originX as 'start' | 'end';
+ this.currentPositionY = position.connectionPair.originY as 'top' | 'bottom';
this.changeDetector.detectChanges(); // Take side-effects to position styles
}
diff --git a/components/date-picker/range-picker.component.spec.ts b/components/date-picker/range-picker.component.spec.ts
index 440e104952b..7456b9adf95 100644
--- a/components/date-picker/range-picker.component.spec.ts
+++ b/components/date-picker/range-picker.component.spec.ts
@@ -162,9 +162,9 @@ describe('NzRangePickerComponent', () => {
expect(getPickerTrigger().querySelector('input:nth-of-type(1)').getAttribute('placeholder')).toBe(featureKey);
});
- it('should support nzPlaceholder', () => {
+ it('should support nzPlaceHolder', () => {
const featureKey = 'RIGHT_PLACEHOLDER';
- fixtureInstance.nzPlaceholder = [ 'Start', featureKey ];
+ fixtureInstance.nzPlaceHolder = [ 'Start', featureKey ];
fixture.detectChanges();
expect(getPickerTrigger().querySelector('input:nth-of-type(2)').getAttribute('placeholder')).toBe(featureKey);
});
@@ -588,7 +588,7 @@ describe('NzRangePickerComponent', () => {
[nzClassName]="nzClassName"
[nzDisabledDate]="nzDisabledDate"
[nzLocale]="nzLocale"
- [nzPlaceholder]="nzPlaceholder"
+ [nzPlaceHolder]="nzPlaceHolder"
[nzPopupStyle]="nzPopupStyle"
[nzDropdownClassName]="nzDropdownClassName"
[nzSize]="nzSize"
@@ -635,7 +635,7 @@ class NzTestRangePickerComponent {
nzClassName;
nzDisabledDate;
nzLocale;
- nzPlaceholder;
+ nzPlaceHolder;
nzPopupStyle;
nzDropdownClassName;
nzSize;