feat(module:date-picker): add nzInline property (#6436)

NG-ZORRO · Feb 25, 2021 · 4d80873 · 4d80873
1 parent 26383a6
commit 4d80873
Show file tree

Hide file tree

Showing 10 changed files with 236 additions and 69 deletions.
diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts
@@ -444,6 +444,22 @@ describe('NzDatePickerComponent', () => {
       fixture.detectChanges();
       expect(debugElement.query(By.css(`.ant-picker-borderless`))).toBeDefined();
     }));
+
+    it('should support nzInline', fakeAsync(() => {
+      const nzOnChange = spyOn(fixtureInstance, 'nzOnChange');
+      fixtureInstance.nzInline = true;
+      fixture.detectChanges();
+      overlayContainerElement = debugElement.nativeElement as HTMLLIElement;
+      const cell = getFirstCell(); // Use the first cell
+      const cellText = cell.textContent!.trim();
+      dispatchMouseEvent(cell, 'click');
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(nzOnChange).toHaveBeenCalled();
+      const result = (nzOnChange.calls.allArgs()[0] as Date[])[0];
+      expect(result.getDate()).toBe(+cellText);
+    }));
   });
 
   describe('panel switch and move forward/afterward', () => {
@@ -1101,6 +1117,7 @@ describe('date-fns testing', () => {
         (nzOnOk)="nzOnOk($event)"
         [nzSuffixIcon]="nzSuffixIcon"
         [nzBorderless]="nzBorderless"
+        [nzInline]="nzInline"
       ></nz-date-picker>
       <ng-template #tplDateRender let-current>
         <div [class.test-first-day]="current.getDate() === 1">{{ current.getDate() }}</div>
@@ -1152,6 +1169,7 @@ class NzTestDatePickerComponent {
   nzMode: string = 'date';
   nzSuffixIcon!: string;
   nzBorderless = false;
+  nzInline = false;
 
   // nzRanges;
   nzOnPanelChange(_: string): void {}

diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts
@@ -60,6 +60,7 @@ export type NzDatePickerSizeType = 'large' | 'default' | 'small';
       [separator]="nzSeparator"
       [disabled]="nzDisabled"
       [inputReadOnly]="nzInputReadOnly"
+      [inline]="nzInline"
       [format]="nzFormat"
       [allowClear]="nzAllowClear"
       [autoFocus]="nzAutoFocus"
@@ -76,6 +77,7 @@ export type NzDatePickerSizeType = 'large' | 'default' | 'small';
     >
       <date-range-popup
         [isRange]="isRange"
+        [inline]="nzInline"
         [defaultPickerValue]="nzDefaultPickerValue"
         [showWeek]="nzMode === 'week'"
         [panelMode]="panelMode"
@@ -102,6 +104,7 @@ export type NzDatePickerSizeType = 'large' | 'default' | 'small';
     '[class.ant-picker-disabled]': `nzDisabled`,
     '[class.ant-picker-rtl]': `dir === 'rtl'`,
     '[class.ant-picker-borderless]': `nzBorderless`,
+    '[class.ant-picker-inline]': `nzInline`,
     '(click)': 'picker.onClickInputBox($event)'
   },
   providers: [
@@ -120,6 +123,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
   static ngAcceptInputType_nzDisabled: BooleanInput;
   static ngAcceptInputType_nzBorderless: BooleanInput;
   static ngAcceptInputType_nzInputReadOnly: BooleanInput;
+  static ngAcceptInputType_nzInline: BooleanInput;
   static ngAcceptInputType_nzOpen: BooleanInput;
   static ngAcceptInputType_nzShowToday: BooleanInput;
   static ngAcceptInputType_nzShowNow: BooleanInput;
@@ -143,6 +147,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
   @Input() @InputBoolean() nzDisabled: boolean = false;
   @Input() @InputBoolean() nzBorderless: boolean = false;
   @Input() @InputBoolean() nzInputReadOnly: boolean = false;
+  @Input() @InputBoolean() nzInline: boolean = false;
   @Input() @InputBoolean() nzOpen?: boolean;
   @Input() nzDisabledDate?: (d: Date) => boolean;
   @Input() nzLocale!: NzDatePickerI18nInterface;

diff --git a/components/date-picker/date-range-popup.component.ts b/components/date-picker/date-range-popup.component.ts
@@ -131,6 +131,7 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
 })
 export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {
   @Input() isRange!: boolean;
+  @Input() inline: boolean = false;
   @Input() showWeek!: boolean;
   @Input() locale!: NzCalendarI18nInterface | undefined;
   @Input() disabledDate?: DisabledDateFn;
@@ -293,28 +294,42 @@ export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {
       this.hoverValue = selectedValue;
 
       if (emitValue) {
-        /**
-         * if sort order is wrong, clear the other part's value
-         */
-        if (wrongSortOrder(selectedValue)) {
+        if (this.inline) {
+          // For UE, Should always be reversed, and clear vaue when next part is right
           nextPart = this.reversedPart(checkedPart);
-          selectedValue[this.datePickerService.getActiveIndex(nextPart)] = null;
-          this.checkedPartArr[this.datePickerService.getActiveIndex(nextPart)] = false;
-        }
-
-        this.datePickerService.setValue(selectedValue);
-
-        /**
-         * range date usually selected paired,
-         * so we emit the date value only both date is allowed and both part are checked
-         */
-        if (this.isBothAllowed(selectedValue) && this.checkedPartArr[0] && this.checkedPartArr[1]) {
+          if (nextPart === 'right') {
+            selectedValue[this.datePickerService.getActiveIndex(nextPart)] = null;
+            this.checkedPartArr[this.datePickerService.getActiveIndex(nextPart)] = false;
+          }
+          this.datePickerService.setValue(selectedValue);
           this.calendarChange.emit(selectedValue);
-          this.clearHoverValue();
-          this.datePickerService.emitValue$.next();
-        } else if (this.isAllowed(selectedValue)) {
-          nextPart = this.reversedPart(checkedPart);
-          this.calendarChange.emit([value.clone()]);
+          if (this.isBothAllowed(selectedValue) && this.checkedPartArr[0] && this.checkedPartArr[1]) {
+            this.clearHoverValue();
+            this.datePickerService.emitValue$.next();
+          }
+        } else {
+          /**
+           * if sort order is wrong, clear the other part's value
+           */
+          if (wrongSortOrder(selectedValue)) {
+            nextPart = this.reversedPart(checkedPart);
+            selectedValue[this.datePickerService.getActiveIndex(nextPart)] = null;
+            this.checkedPartArr[this.datePickerService.getActiveIndex(nextPart)] = false;
+          }
+
+          this.datePickerService.setValue(selectedValue);
+          /**
+           * range date usually selected paired,
+           * so we emit the date value only both date is allowed and both part are checked
+           */
+          if (this.isBothAllowed(selectedValue) && this.checkedPartArr[0] && this.checkedPartArr[1]) {
+            this.calendarChange.emit(selectedValue);
+            this.clearHoverValue();
+            this.datePickerService.emitValue$.next();
+          } else if (this.isAllowed(selectedValue)) {
+            nextPart = this.reversedPart(checkedPart);
+            this.calendarChange.emit([value.clone()]);
+          }
         }
       } else {
         this.datePickerService.setValue(selectedValue);

diff --git a/components/date-picker/demo/inline.md b/components/date-picker/demo/inline.md
@@ -0,0 +1,14 @@
+---
+order: 13
+title:
+  zh-CN: 内联模式
+  en-US: Inline mode
+---
+
+## zh-CN
+
+使用 `nzInline` 属性，可以渲染为内联模式。
+
+## en-US
+
+We can set the inline mode by `nzInline`.
diff --git a/components/date-picker/demo/inline.ts b/components/date-picker/demo/inline.ts
@@ -0,0 +1,57 @@
+import { Component } from '@angular/core';
+import getISOWeek from 'date-fns/getISOWeek';
+
+@Component({
+  selector: 'nz-demo-date-picker-inline',
+  template: `
+    <nz-tabset>
+      <nz-tab nzTitle="Default">
+        <nz-date-picker nzInline [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-date-picker>
+      </nz-tab>
+      <nz-tab nzTitle="Week">
+        <nz-date-picker nzInline nzMode="week" [(ngModel)]="date" (ngModelChange)="getWeek($event)"></nz-date-picker>
+      </nz-tab>
+      <nz-tab nzTitle="Month">
+        <nz-date-picker nzInline nzMode="month" [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-date-picker>
+      </nz-tab>
+      <nz-tab nzTitle="Year">
+        <nz-date-picker nzInline nzMode="year" [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-date-picker>
+      </nz-tab>
+      <nz-tab nzTitle="Range">
+        <nz-range-picker nzInline [(ngModel)]="rangeDate" (ngModelChange)="onChange($event)"></nz-range-picker>
+      </nz-tab>
+      <nz-tab nzTitle="Range Time">
+        <nz-range-picker nzInline nzShowTime [(ngModel)]="rangeDate" (ngModelChange)="onChange($event)"></nz-range-picker>
+      </nz-tab>
+      <nz-tab nzTitle="Range Week">
+        <nz-range-picker nzInline nzMode="week" [(ngModel)]="rangeDate" (ngModelChange)="onChange($event)"></nz-range-picker>
+      </nz-tab>
+      <nz-tab nzTitle="Range Month">
+        <nz-range-picker nzInline nzMode="month" [(ngModel)]="rangeDate" (ngModelChange)="onChange($event)"></nz-range-picker>
+      </nz-tab>
+      <nz-tab nzTitle="Range Year">
+        <nz-range-picker nzInline nzMode="year" [(ngModel)]="rangeDate" (ngModelChange)="onChange($event)"></nz-range-picker>
+      </nz-tab>
+    </nz-tabset>
+  `,
+  styles: [
+    `
+      :host ::ng-deep .ant-tabs-tabpane {
+        padding: 24px;
+        overflow: auto;
+      }
+    `
+  ]
+})
+export class NzDemoDatePickerInlineComponent {
+  date = null;
+  rangeDate = null;
+
+  onChange(result: Date): void {
+    console.log('onChange: ', result);
+  }
+
+  getWeek(result: Date): void {
+    console.log('week: ', getISOWeek(result));
+  }
+}
diff --git a/components/date-picker/demo/module b/components/date-picker/demo/module
@@ -3,5 +3,6 @@ import { NzRadioModule } from 'ng-zorro-antd/radio';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzSelectModule } from 'ng-zorro-antd/select';
 import { NzSpaceModule } from 'ng-zorro-antd/space';
+import { NzTabsModule } from 'ng-zorro-antd/tabs';
 
-export const moduleList = [ NzDatePickerModule, NzRadioModule, NzButtonModule, NzSelectModule, NzSpaceModule ];
+export const moduleList = [ NzDatePickerModule, NzRadioModule, NzButtonModule, NzSelectModule, NzSpaceModule, NzTabsModule ];