feat(module:date-picker): quarter selection of date picker

components/core/time/candy-date.ts

@@ -9,6 +9,7 @@ import {
   differenceInCalendarDays,
   differenceInCalendarMonths,
   differenceInCalendarYears,
+  differenceInCalendarQuarters,
   differenceInHours,
   differenceInMinutes,
   differenceInSeconds,
@@ -20,19 +21,22 @@ import {
   isSameMonth,
   isSameSecond,
   isSameYear,
+  isSameQuarter,
   isToday,
   isValid,
   setDay,
   setMonth,
   setYear,
   startOfMonth,
-  startOfWeek
+  startOfWeek,
+  getQuarter,
+  setQuarter
 } from 'date-fns';
 
 import { warn } from 'ng-zorro-antd/core/logger';
 import { IndexableObject, NzSafeAny } from 'ng-zorro-antd/core/types';
 
-export type CandyDateMode = 'decade' | 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';
+export type CandyDateMode = 'decade' | 'year' | 'quarter' | 'month' | 'day' | 'hour' | 'minute' | 'second';
 export type NormalizedMode = 'decade' | 'year' | 'month';
 export type WeekDayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export type CandyDateType = CandyDate | Date | null;
@@ -192,6 +196,14 @@ export class CandyDate implements IndexableObject {
     return new CandyDate(date);
   }
 
+  getQuarter(): number {
+    return getQuarter(this.nativeDate);
+  }
+
+  setQuarter(quarter: number): CandyDate {
+    return new CandyDate(setQuarter(this.nativeDate, quarter));
+  }
+
   addDays(amount: number): CandyDate {
     return this.setDate(this.getDate() + amount);
   }
@@ -218,6 +230,9 @@ export class CandyDate implements IndexableObject {
       case 'year':
         fn = isSameYear;
         break;
+      case 'quarter':
+        fn = isSameQuarter;
+        break;
       case 'month':
         fn = isSameMonth;
         break;
@@ -243,6 +258,9 @@ export class CandyDate implements IndexableObject {
   isSameYear(date: CandyDateType): boolean {
     return this.isSame(date, 'year');
   }
+  isSameQuarter(date: CandyDateType): boolean {
+    return this.isSame(date, 'quarter');
+  }
 
   isSameMonth(date: CandyDateType): boolean {
     return this.isSame(date, 'month');
@@ -273,6 +291,9 @@ export class CandyDate implements IndexableObject {
       case 'year':
         fn = differenceInCalendarYears;
         break;
+      case 'quarter':
+        fn = differenceInCalendarQuarters;
+        break;
       case 'month':
         fn = differenceInCalendarMonths;
         break;
@@ -299,6 +320,10 @@ export class CandyDate implements IndexableObject {
     return this.isBefore(date, 'year');
   }
 
+  isBeforeQuarter(date: CandyDateType): boolean {
+    return this.isBefore(date, 'quarter');
+  }
+
   isBeforeMonth(date: CandyDateType): boolean {
     return this.isBefore(date, 'month');
   }

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

@@ -95,7 +95,7 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
 @Component({
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  selector: 'nz-date-picker,nz-week-picker,nz-month-picker,nz-year-picker,nz-range-picker',
+  selector: 'nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker',
   exportAs: 'nzDatePicker',
   template: `
     @if (!nzInline) {
@@ -763,6 +763,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, AfterViewInit,
   setModeAndFormat(): void {
     const inputFormats: { [key in NzDateMode]?: string } = {
       year: 'yyyy',
+      quarter: 'yyyy-[Q]Q',
       month: 'yyyy-MM',
       week: 'YYYY-ww',
       date: this.nzShowTime ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'
@@ -834,13 +835,15 @@ export class NzDatePickerComponent implements OnInit, OnChanges, AfterViewInit,
     if (!this.isCustomPlaceHolder && this.nzLocale) {
       const defaultPlaceholder: { [key in NzDateMode]?: string } = {
         year: this.getPropertyOfLocale('yearPlaceholder'),
+        quarter: this.getPropertyOfLocale('quarterPlaceholder'),
         month: this.getPropertyOfLocale('monthPlaceholder'),
         week: this.getPropertyOfLocale('weekPlaceholder'),
         date: this.getPropertyOfLocale('placeholder')
       };
 
       const defaultRangePlaceholder: { [key in NzDateMode]?: string[] } = {
         year: this.getPropertyOfLocale('rangeYearPlaceholder'),
+        quarter: this.getPropertyOfLocale('rangeQuarterPlaceholder'),
         month: this.getPropertyOfLocale('rangeMonthPlaceholder'),
         week: this.getPropertyOfLocale('rangeWeekPlaceholder'),
         date: this.getPropertyOfLocale('rangePlaceholder')

components/date-picker/date-picker.module.ts

@@ -10,6 +10,7 @@ import { NzDatePickerComponent } from './date-picker.component';
 import { DateRangePopupComponent } from './date-range-popup.component';
 import { InnerPopupComponent } from './inner-popup.component';
 import { NzMonthPickerComponent } from './month-picker.component';
+import { NzQuarterPickerComponent } from './quarter-picker.component';
 import { NzRangePickerComponent } from './range-picker.component';
 import { NzWeekPickerComponent } from './week-picker.component';
 import { NzYearPickerComponent } from './year-picker.component';
@@ -23,14 +24,16 @@ import { NzYearPickerComponent } from './year-picker.component';
     NzRangePickerComponent,
     CalendarFooterComponent,
     InnerPopupComponent,
-    DateRangePopupComponent
+    DateRangePopupComponent,
+    NzQuarterPickerComponent
   ],
   exports: [
     NzDatePickerComponent,
     NzRangePickerComponent,
     NzMonthPickerComponent,
     NzYearPickerComponent,
-    NzWeekPickerComponent
+    NzWeekPickerComponent,
+    NzQuarterPickerComponent
   ]
 })
 export class NzDatePickerModule {}

components/date-picker/date-picker.service.ts

@@ -51,6 +51,7 @@ export class DatePickerService implements OnDestroy {
     const parentPanels: { [key in NzDateMode]?: NormalizedMode } = {
       date: 'month',
       month: 'year',
+      quarter: 'year',
       year: 'decade'
     };
     if (this.isRange) {

components/date-picker/demo/basic.ts

@@ -13,6 +13,8 @@ import { en_US, NzI18nService, zh_CN } from 'ng-zorro-antd/i18n';
     <br />
     <nz-date-picker nzMode="month" [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-date-picker>
     <br />
+    <nz-date-picker nzMode="quarter" [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-date-picker>
+    <br />
     <nz-date-picker nzMode="year" [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-date-picker>
     <br />
     <button nz-button nzType="default" (click)="changeLanguage()">Switch language for all pickers</button>

components/date-picker/demo/date-render.ts

@@ -7,9 +7,13 @@ import { Component } from '@angular/core';
     <nz-range-picker [nzDateRender]="tplRender"></nz-range-picker>
 
     <ng-template #tplRender let-current>
-      <div class="ant-picker-cell-inner" [class.border]="current.getDate() === 1">
-        {{ current.getDate() }}
-      </div>
+      <div class="ant-picker-cell-inner" [class.border]="current.getDate() === 1"> {{ current.getDate() }} </div>
+    </ng-template>
+
+    <br />
+    <nz-date-picker nzMode="quarter" nzFormat="yyyy年Q季度" [nzDateRender]="tplQuarterRender"></nz-date-picker>
+    <ng-template #tplQuarterRender let-current>
+      <div class="ant-picker-cell-inner">{{ getQuarter(current) }}</div>
     </ng-template>
   `,
   styles: [
@@ -25,4 +29,10 @@ import { Component } from '@angular/core';
     `
   ]
 })
-export class NzDemoDatePickerDateRenderComponent {}
+export class NzDemoDatePickerDateRenderComponent {
+  getQuarter(date: Date): string {
+    const quarter = Math.floor((date.getMonth() + 3) / 3);
+    const quarterMapper: Record<string, string> = { 1: '一', 2: '二', 3: '三', 4: '四' };
+    return `${quarterMapper[quarter]}季度`;
+  }
+}

components/date-picker/demo/disabled-date.ts

@@ -16,6 +16,8 @@ import { DisabledTimeFn, DisabledTimePartial } from 'ng-zorro-antd/date-picker';
     <br />
     <nz-date-picker nzMode="month" [nzDisabledDate]="disabledDate"></nz-date-picker>
     <br />
+    <nz-date-picker nzMode="quarter" [nzDisabledDate]="disabledDate"></nz-date-picker>
+    <br />
     <nz-date-picker nzMode="year" [nzDisabledDate]="disabledDate"></nz-date-picker>
     <br />
     <nz-range-picker

components/date-picker/demo/format.ts

@@ -7,6 +7,8 @@ import { Component } from '@angular/core';
     <br />
     <nz-date-picker nzMode="month" [nzFormat]="monthFormat"></nz-date-picker>
     <br />
+    <nz-date-picker nzMode="quarter" [nzFormat]="quarterFormat"></nz-date-picker>
+    <br />
     <nz-range-picker [nzFormat]="dateFormat"></nz-range-picker>
   `,
   styles: [
@@ -21,4 +23,5 @@ import { Component } from '@angular/core';
 export class NzDemoDatePickerFormatComponent {
   dateFormat = 'yyyy/MM/dd';
   monthFormat = 'yyyy/MM';
+  quarterFormat = 'yyyy/[Q]Q';
 }

components/date-picker/demo/inline.ts

@@ -15,6 +15,14 @@ import { getISOWeek } from 'date-fns';
       <nz-tab nzTitle="Month">
         <nz-date-picker nzInline nzMode="month" [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-date-picker>
       </nz-tab>
+      <nz-tab nzTitle="Quarter">
+        <nz-date-picker
+          nzInline
+          nzMode="quarter"
+          [(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>
@@ -45,6 +53,14 @@ import { getISOWeek } from 'date-fns';
           (ngModelChange)="onChange($event)"
         ></nz-range-picker>
       </nz-tab>
+      <nz-tab nzTitle="Range Quarter">
+        <nz-range-picker
+          nzInline
+          nzMode="quarter"
+          [(ngModel)]="rangeDate"
+          (ngModelChange)="onChange($event)"
+        ></nz-range-picker>
+      </nz-tab>
       <nz-tab nzTitle="Range Year">
         <nz-range-picker
           nzInline

components/date-picker/demo/range-picker.ts

@@ -13,6 +13,8 @@ import { getISOWeek } from 'date-fns';
     <br />
     <nz-range-picker nzMode="month" [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-range-picker>
     <br />
+    <nz-range-picker nzMode="quarter" [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-range-picker>
+    <br />
     <nz-range-picker nzMode="year" [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-range-picker>
   `,
   styles: [

components/date-picker/demo/size.ts

@@ -16,6 +16,8 @@ import { Component } from '@angular/core';
     <br />
     <nz-date-picker nzMode="month" [nzSize]="size"></nz-date-picker>
     <br />
+    <nz-date-picker nzMode="quarter" [nzSize]="size"></nz-date-picker>
+    <br />
     <nz-range-picker [nzSize]="size"></nz-range-picker>
   `,
   styles: [

components/date-picker/demo/switch.ts

@@ -8,6 +8,7 @@ import { Component } from '@angular/core';
         <nz-option nzValue="date" nzLabel="Date"></nz-option>
         <nz-option nzValue="week" nzLabel="Week"></nz-option>
         <nz-option nzValue="month" nzLabel="Month"></nz-option>
+        <nz-option nzValue="quarter" nzLabel="Quarter"></nz-option>
         <nz-option nzValue="year" nzLabel="Year"></nz-option>
       </nz-select>
       <nz-date-picker *nzSpaceItem [nzMode]="mode"></nz-date-picker>

components/date-picker/doc/index.en-US.md

@@ -46,7 +46,7 @@ The following APIs are shared by nz-date-picker, nz-range-picker.
 | `[nzFormat]`             | to set the date format, see `nzFormat special instructions`                                                                        | `string`                                                   | -                                                                                                          |
 | `[nzInputReadOnly]`      | set the readonly attribute of the input tag (avoids virtual keyboard on touch devices)                                             | `boolean`                                                  | `false`                                                                                                    | -             |
 | `[nzLocale]`             | localization configuration                                                                                                         | `object`                                                   | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | -             |
-| `[nzMode]`               | Set picker mode                                                                                                                    | `'date'` \| `'week'` \| `'month'` \| `'year'`              | `'date'`                                                                                                   |
+| `[nzMode]`               | Set picker mode                                                                                                                    | `'date' \| 'week' \| 'month' \| 'quarter'  \| 'year'`      | `'date'`                                                                                                   |
 | `[nzPlaceHolder]`        | placeholder of date input                                                                                                          | `string` \| `string[]`                                     | -                                                                                                          |
 | `[nzPopupStyle]`         | to customize the style of the popup calendar                                                                                       | `object`                                                   | `{}`                                                                                                       | -             |
 | `[nzRenderExtraFooter]`  | render extra footer in panel                                                                                                       | `TemplateRef \| string \| (() => TemplateRef \| string)`   | -                                                                                                          |

components/date-picker/doc/index.zh-CN.md

@@ -46,7 +46,7 @@ registerLocaleData(zh);
 | `[nzFormat]`             | 展示的日期格式，见`nzFormat特别说明`                          | `string`                                                   | -                                                                                                           |
 | `[nzInputReadOnly]`      | 为 input 标签设置只读属性（避免在移动设备上触发小键盘）       | `boolean`                                                  | `false`                                                                                                     | -        |
 | `[nzLocale]`             | 国际化配置                                                    | `object`                                                   | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | -        |
-| `[nzMode]`               | 选择模式                                                      | `'date'` \| `'week'` \| `'month'` \| `'year'`              | `'date'`                                                                                                    |
+| `[nzMode]`               | 选择模式                                                      | `'date' \| 'week' \| 'month' \| 'quarter'  \| 'year'`      | `'date'`                                                                                                    |
 | `[nzPlaceHolder]`        | 输入框提示文字                                                | `string \| string[]`                                       | -                                                                                                           | -        |
 | `[nzPopupStyle]`         | 额外的弹出日历样式                                            | `object`                                                   | `{}`                                                                                                        | -        |
 | `[nzRenderExtraFooter]`  | 在面板中添加额外的页脚                                        | `TemplateRef \| string \| (() => TemplateRef \| string)`   | -                                                                                                           |

components/date-picker/inner-popup.component.ts

@@ -104,6 +104,31 @@ import { PREFIX_CLASS } from './util';
               />
             </div>
           }
+          @case ('quarter') {
+            <quarter-header
+              [(value)]="activeDate"
+              [locale]="locale"
+              [showSuperPreBtn]="enablePrevNext('prev', 'month')"
+              [showSuperNextBtn]="enablePrevNext('next', 'month')"
+              [showNextBtn]="false"
+              [showPreBtn]="false"
+              (panelModeChange)="panelModeChange.emit($event)"
+              (valueChange)="headerChange.emit($event)"
+            />
+            <div class="{{ prefixCls }}-body">
+              <quarter-table
+                [value]="value"
+                [activeDate]="activeDate"
+                [locale]="locale"
+                [disabledDate]="disabledDate"
+                [selectedValue]="selectedValue"
+                [hoverValue]="hoverValue"
+                (valueChange)="onChooseQuarter($event)"
+                (cellHover)="cellHover.emit($event)"
+                [cellRender]="dateRender"
+              />
+            </div>
+          }
           @default {
             <date-header
               [(value)]="activeDate"
@@ -225,6 +250,12 @@ export class InnerPopupComponent implements OnChanges {
     }
   }
 
+  onChooseQuarter(value: CandyDate): void {
+    this.activeDate = this.activeDate.setQuarter(value.getQuarter());
+    this.value = value;
+    this.selectDate.emit(value);
+  }
+
   onChooseYear(value: CandyDate): void {
     this.activeDate = this.activeDate.setYear(value.getYear());
     if (this.endPanelMode === 'year') {

components/date-picker/lib/lib-packer.module.ts

@@ -15,6 +15,8 @@ import { DecadeHeaderComponent } from './decade-header.component';
 import { DecadeTableComponent } from './decade-table.component';
 import { MonthHeaderComponent } from './month-header.component';
 import { MonthTableComponent } from './month-table.component';
+import { QuarterHeaderComponent } from './quarter-header.component';
+import { QuarterTableComponent } from './quarter-table.component';
 import { YearHeaderComponent } from './year-header.component';
 import { YearTableComponent } from './year-table.component';
 
@@ -27,7 +29,9 @@ import { YearTableComponent } from './year-table.component';
     MonthHeaderComponent,
     MonthTableComponent,
     YearHeaderComponent,
-    YearTableComponent
+    YearTableComponent,
+    QuarterHeaderComponent,
+    QuarterTableComponent
   ],
   exports: [
     DateHeaderComponent,
@@ -37,7 +41,9 @@ import { YearTableComponent } from './year-table.component';
     MonthHeaderComponent,
     MonthTableComponent,
     YearHeaderComponent,
-    YearTableComponent
+    YearTableComponent,
+    QuarterHeaderComponent,
+    QuarterTableComponent
   ]
 })
 export class LibPackerModule {}

components/date-picker/lib/public-api.ts

@@ -7,6 +7,8 @@ export { DecadeHeaderComponent as ɵDecadeHeaderComponent } from './decade-heade
 export { DecadeTableComponent as ɵDecadeTableComponent } from './decade-table.component';
 export { YearHeaderComponent as ɵYearHeaderComponent } from './year-header.component';
 export { YearTableComponent as ɵYearTableComponent } from './year-table.component';
+export { QuarterHeaderComponent as ɵQuarterHeaderComponent } from './quarter-header.component';
+export { QuarterTableComponent as ɵQuarterTableComponent } from './quarter-table.component';
 export { MonthHeaderComponent as ɵMonthHeaderComponent } from './month-header.component';
 export { MonthTableComponent as ɵMonthTableComponent } from './month-table.component';
 export { DateHeaderComponent as ɵDateHeaderComponent } from './date-header.component';