feat(module:date-picker): add nzShowNow (#6160)

close #6146
Co-authored-by: C-racker <lywp8023@163.com>

components/date-picker/calendar-footer.component.ts

@@ -51,7 +51,7 @@ import { PREFIX_CLASS } from './util';
       </a>
       <ul *ngIf="hasTimePicker || rangeQuickSelector" class="{{ prefixCls }}-ranges">
         <ng-container *ngTemplateOutlet="rangeQuickSelector"></ng-container>
-        <li *ngIf="hasTimePicker && !isRange" class="{{ prefixCls }}-now">
+        <li *ngIf="showNow" class="{{ prefixCls }}-now">
           <a class="{{ prefixCls }}-now-btn" (click)="isTodayDisabled ? null : onClickToday()">
             {{ locale.now }}
           </a>
@@ -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;
 

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<void> | string);
   nzShowToday = false;
+  nzShowNow = false;
   nzMode: string = 'date';
   nzSuffixIcon!: string;
   nzBorderless = false;

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<NzSafeAny> | string | FunctionProp<TemplateRef<NzSafeAny> | string>;
   @Input() @InputBoolean() nzShowToday: boolean = true;
+  @Input() @InputBoolean() nzShowNow: boolean = true;
   @Input() nzMode: NzDateMode | NzDateMode[] = 'date';
   @Input() nzRanges?: PresetRanges;
   @Input() nzDefaultPickerValue: CompatibleDate | null = null;

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<void> | string;
   @Input() ranges?: PresetRanges;

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<Date>` | - |
 
 ### nz-range-picker

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<Date>` | - |
 
 

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<void> | string);
   nzShowToday = false;
+  nzShowNow = false;
   nzMode = 'date';
 
   nzRanges: any; // tslint:disable-line:no-any