diff --git a/components/date-picker/calendar-footer.component.ts b/components/date-picker/calendar-footer.component.ts
index b7824e5929a..c96268486c1 100644
--- a/components/date-picker/calendar-footer.component.ts
+++ b/components/date-picker/calendar-footer.component.ts
@@ -51,7 +51,7 @@ import { PREFIX_CLASS } from './util';
- -
+
-
{{ locale.now }}
@@ -75,6 +75,7 @@ import { PREFIX_CLASS } from './util';
export class CalendarFooterComponent implements OnChanges {
@Input() locale!: NzCalendarI18nInterface;
@Input() showToday: boolean = false;
+ @Input() showNow: boolean = false;
@Input() hasTimePicker: boolean = false;
@Input() isRange: boolean = false;
diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts
index 0cccb436888..f35dd53bdee 100644
--- a/components/date-picker/date-picker.component.spec.ts
+++ b/components/date-picker/date-picker.component.spec.ts
@@ -7,6 +7,7 @@ import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick } from '@angu
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import isEqual from 'date-fns/isEqual';
import isSameDay from 'date-fns/isSameDay';
import { enUS } from 'date-fns/locale';
@@ -820,6 +821,36 @@ describe('NzDatePickerComponent', () => {
expect(queryFromOverlay('.ant-picker-container')).toBeFalsy(); // Should closed
}));
+ it('should support nzShowNow', fakeAsync(() => {
+ fixture.detectChanges();
+ openPickerByClickTrigger();
+ expect(overlayContainerElement.querySelector('.ant-picker-footer')).toBeDefined();
+
+ fixtureInstance.nzShowTime = true;
+
+ fixtureInstance.nzShowNow = false;
+ fixture.detectChanges();
+ expect(overlayContainerElement.querySelector('.ant-picker-now-btn')).toBeNull();
+
+ fixtureInstance.nzShowNow = true;
+ fixture.detectChanges();
+ expect(overlayContainerElement.querySelector('.ant-picker-now-btn')).toBeDefined();
+
+ // Click now button
+ const nzOnChange = spyOn(fixtureInstance, 'nzOnChange');
+ dispatchMouseEvent(queryFromOverlay('.ant-picker-now-btn'), 'click');
+ fixture.detectChanges();
+
+ // Click ok button
+ dispatchMouseEvent(overlayContainerElement.querySelector('.ant-picker-ok > button')!, 'click');
+ const result = (nzOnChange.calls.allArgs()[0] as Date[])[0];
+ expect(isEqual(new Date(), result)).toBeTruthy();
+ fixture.detectChanges();
+ tick(500);
+ fixture.detectChanges();
+ expect(queryFromOverlay('.ant-picker-container')).toBeFalsy(); // Should closed
+ }));
+
it('should support nzMode', fakeAsync(() => {
fixtureInstance.nzValue = new Date('2020-12-01');
fixture.detectChanges();
@@ -1059,6 +1090,7 @@ describe('date-fns testing', () => {
[nzDisabledTime]="nzDisabledTime"
[nzRenderExtraFooter]="nzRenderExtraFooter"
[nzShowToday]="nzShowToday"
+ [nzShowNow]="nzShowNow"
[nzMode]="nzMode"
(nzOnPanelChange)="nzOnPanelChange($event)"
(nzOnCalendarChange)="nzOnCalendarChange($event)"
@@ -1113,6 +1145,7 @@ class NzTestDatePickerComponent {
nzDisabledTime: any; // tslint:disable-line:no-any
nzRenderExtraFooter!: string | (() => TemplateRef | string);
nzShowToday = false;
+ nzShowNow = false;
nzMode: string = 'date';
nzSuffixIcon!: string;
nzBorderless = false;
diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts
index de7b851ed4d..018abc43269 100644
--- a/components/date-picker/date-picker.component.ts
+++ b/components/date-picker/date-picker.component.ts
@@ -80,6 +80,7 @@ export type NzDatePickerSizeType = 'large' | 'default' | 'small';
(calendarChange)="onCalendarChange($event)"
[locale]="nzLocale?.lang!"
[showToday]="nzMode === 'date' && nzShowToday && !isRange && !nzShowTime"
+ [showNow]="nzMode === 'date' && nzShowNow && !isRange && !!nzShowTime"
[showTime]="nzShowTime"
[dateRender]="nzDateRender"
[disabledDate]="nzDisabledDate"
@@ -116,6 +117,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
static ngAcceptInputType_nzInputReadOnly: BooleanInput;
static ngAcceptInputType_nzOpen: BooleanInput;
static ngAcceptInputType_nzShowToday: BooleanInput;
+ static ngAcceptInputType_nzShowNow: BooleanInput;
static ngAcceptInputType_nzMode: NzDateMode | NzDateMode[] | string | string[] | null | undefined;
static ngAcceptInputType_nzShowTime: BooleanInput | SupportTimeOptions | null | undefined;
@@ -151,6 +153,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
@Input() nzDisabledTime?: DisabledTimeFn;
@Input() nzRenderExtraFooter?: TemplateRef | string | FunctionProp | string>;
@Input() @InputBoolean() nzShowToday: boolean = true;
+ @Input() @InputBoolean() nzShowNow: boolean = true;
@Input() nzMode: NzDateMode | NzDateMode[] = 'date';
@Input() nzRanges?: PresetRanges;
@Input() nzDefaultPickerValue: CompatibleDate | null = null;
diff --git a/components/date-picker/date-range-popup.component.ts b/components/date-picker/date-range-popup.component.ts
index 10fcda1a304..edaa4754295 100644
--- a/components/date-picker/date-range-popup.component.ts
+++ b/components/date-picker/date-range-popup.component.ts
@@ -100,6 +100,7 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
[locale]="locale!"
[isRange]="isRange"
[showToday]="showToday"
+ [showNow]="showNow"
[hasTimePicker]="hasTimePicker"
[okDisabled]="!isAllowed($any(datePickerService?.value))"
[extraFooter]="extraFooter"
@@ -139,6 +140,7 @@ export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {
@Input() disabledDate?: DisabledDateFn;
@Input() disabledTime?: DisabledTimeFn; // This will lead to rebuild time options
@Input() showToday!: boolean;
+ @Input() showNow!: boolean;
@Input() showTime!: SupportTimeOptions | boolean;
@Input() extraFooter?: TemplateRef | string;
@Input() ranges?: PresetRanges;
diff --git a/components/date-picker/doc/index.en-US.md b/components/date-picker/doc/index.en-US.md
index 30abd262383..644707a261c 100644
--- a/components/date-picker/doc/index.en-US.md
+++ b/components/date-picker/doc/index.en-US.md
@@ -72,6 +72,7 @@ The following APIs are shared by nz-date-picker, nz-range-picker.
| `[nzDisabledTime]` | to specify the time that cannot be selected | `(current: Date) => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds }` | - |
| `[nzShowTime]` | to provide an additional time selection | `object \| boolean` | [TimePicker Options](/components/time-picker/en#api) |
| `[nzShowToday]` | whether to show 'Today' button | `boolean` | `true` |
+| `[nzShowNow]` | whether to show 'Now' button on panel when `nzShowTime` is set | `boolean` | `true` |
| `(nzOnOk)` | callback when click ok button | `EventEmitter` | - |
### nz-range-picker
diff --git a/components/date-picker/doc/index.zh-CN.md b/components/date-picker/doc/index.zh-CN.md
index 669b28f228f..def8cac30f5 100644
--- a/components/date-picker/doc/index.zh-CN.md
+++ b/components/date-picker/doc/index.zh-CN.md
@@ -73,6 +73,7 @@ registerLocaleData(zh);
| `[nzDisabledTime]` | 不可选择的时间 | `(current: Date) => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds }` | - |
| `[nzShowTime]` | 增加时间选择功能 | `object \| boolean` | [TimePicker Options](/components/time-picker/zh#api) |
| `[nzShowToday]` | 是否展示“今天”按钮 | `boolean` | `true` |
+| `[nzShowNow]` | 当设定了`nzShowTime`的时候,面板是否显示“此刻”按钮 | `boolean` | `true` |
| `(nzOnOk)` | 点击确定按钮的回调 | `EventEmitter` | - |
diff --git a/components/date-picker/range-picker.component.spec.ts b/components/date-picker/range-picker.component.spec.ts
index 46623938a9e..9ab67edf075 100644
--- a/components/date-picker/range-picker.component.spec.ts
+++ b/components/date-picker/range-picker.component.spec.ts
@@ -988,6 +988,7 @@ describe('NzRangePickerComponent', () => {
[nzDisabledTime]="nzDisabledTime"
[nzRenderExtraFooter]="nzRenderExtraFooter"
[nzShowToday]="nzShowToday"
+ [nzShowNow]="nzShowNow"
[nzMode]="nzMode"
[nzRanges]="nzRanges"
[nzDefaultPickerValue]="nzDefaultPickerValue"
@@ -1036,6 +1037,7 @@ class NzTestRangePickerComponent {
nzDisabledTime: any; // tslint:disable-line:no-any
nzRenderExtraFooter!: string | (() => TemplateRef | string);
nzShowToday = false;
+ nzShowNow = false;
nzMode = 'date';
nzRanges: any; // tslint:disable-line:no-any