diff --git a/components/date-picker/calendar-footer.component.ts b/components/date-picker/calendar-footer.component.ts index 108aa4b4de..2982ca4f53 100644 --- a/components/date-picker/calendar-footer.component.ts +++ b/components/date-picker/calendar-footer.component.ts @@ -3,7 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet } from '@angular/common'; +import { NgTemplateOutlet } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -33,48 +33,58 @@ import { PREFIX_CLASS } from './util'; exportAs: 'calendarFooter', template: `
-
- - - - - + @if (extraFooter) { +
+ @if (isExtraFooterTemplateRef) { + + } + @if (isExtraFooterNonEmptyString) { - - -
- - {{ locale.today }} - - + } +
+ } + + @if (showToday) { + + {{ locale.today }} + + } + + @if (hasTimePicker || rangeQuickSelector) { + + }
`, - imports: [NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet, NzButtonModule], + imports: [NgTemplateOutlet, NzButtonModule], standalone: true }) export class CalendarFooterComponent implements OnChanges { @@ -116,4 +126,12 @@ export class CalendarFooterComponent implements OnChanges { const now: CandyDate = new CandyDate(); this.clickToday.emit(now.clone()); // To prevent the "now" being modified from outside, we use clone } + + get isExtraFooterTemplateRef(): boolean { + return isTemplateRef(this.extraFooter); + } + + get isExtraFooterNonEmptyString(): boolean { + return isNonEmptyString(this.extraFooter); + } } diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts index febe10f1ee..dea35af55a 100644 --- a/components/date-picker/date-picker.component.spec.ts +++ b/components/date-picker/date-picker.component.spec.ts @@ -4,7 +4,7 @@ import { OverlayContainer } from '@angular/cdk/overlay'; import { registerLocaleData } from '@angular/common'; import zh from '@angular/common/locales/zh'; import { ApplicationRef, Component, DebugElement, TemplateRef, ViewChild } from '@angular/core'; -import { ComponentFixture, TestBed, fakeAsync, flush, inject, tick } from '@angular/core/testing'; +import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick } from '@angular/core/testing'; import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -1410,63 +1410,62 @@ describe('in form', () => { @Component({ template: ` - - - - -
{{ current.getDate() }}
- - TEST_EXTRA_FOOTER - - - - - - - - - - - - - - - - - + @switch (useSuite) { + @case (1) { + + } + @case (2) { + + } + @case (3) { + + } + @case (4) { + + } + @case (5) { + + + + + } + } + +
{{ current.getDate() }}
+ + TEST_EXTRA_FOOTER ` }) class NzTestDatePickerComponent { diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts index 5c8ab5f52e..5e41b84655 100644 --- a/components/date-picker/date-picker.component.ts +++ b/components/date-picker/date-picker.component.ts @@ -14,7 +14,7 @@ import { VerticalConnectionPos } from '@angular/cdk/overlay'; import { Platform } from '@angular/cdk/platform'; -import { DOCUMENT, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common'; +import { DOCUMENT, NgStyle, NgTemplateOutlet } from '@angular/common'; import { AfterViewInit, ChangeDetectionStrategy, @@ -98,48 +98,49 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'; selector: 'nz-date-picker,nz-week-picker,nz-month-picker,nz-year-picker,nz-range-picker', exportAs: 'nzDatePicker', template: ` - - -
- - -
- - - + @if (!nzInline) { + @if (!isRange) {
- + + +
+ } @else { +
+
- {{ nzSeparator }} - + @if (nzSeparator) { + {{ nzSeparator }} + } @else { - + }
- +
- - - + + } + } @else { + + }
- - - + @if (showClear) { + + + + } + - + @if (hasFeedback && !!status) { + + } @@ -205,7 +211,7 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'; [ranges]="nzRanges" [dir]="dir" (resultOk)="onResultOk()" - > + /> @@ -254,7 +260,6 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'; ], animations: [slideMotion], imports: [ - NgIf, FormsModule, NgTemplateOutlet, NzOutletModule, @@ -482,7 +487,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, AfterViewInit, } } - showClear(): boolean { + get showClear(): boolean { return !this.nzDisabled && !this.isEmptyValue(this.datePickerService.value) && this.nzAllowClear; } diff --git a/components/date-picker/date-range-popup.component.ts b/components/date-picker/date-range-popup.component.ts index 755c9ff265..4e0f348578 100644 --- a/components/date-picker/date-range-popup.component.ts +++ b/components/date-picker/date-range-popup.component.ts @@ -4,7 +4,7 @@ */ import { Direction } from '@angular/cdk/bidi'; -import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common'; +import { NgTemplateOutlet } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, @@ -57,26 +57,22 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util'; selector: 'date-range-popup', exportAs: 'dateRangePopup', template: ` - + @if (isRange) {
- - - - - - - + @if (hasTimePicker) { + + } @else { + + + }
- +
- - + } @else {
- - + +
- + }
@@ -112,40 +108,42 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util'; (selectDate)="changeValueFromSelect($event, !showTime)" (selectTime)="onSelectTime($event, partType)" (headerChange)="onActiveDateChange($event, partType)" - > + />
- + @if (hasFooter) { + + } -
  • - {{ name }} -
    • + @for (name of getObjectKeys(ranges); track name) { +
  • + {{ name }} +
    • + }     `, - imports: [InnerPopupComponent, NgTemplateOutlet, NgIf, CalendarFooterComponent, NgForOf], + imports: [InnerPopupComponent, NgTemplateOutlet, CalendarFooterComponent], standalone: true }) export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy { diff --git a/components/date-picker/inner-popup.component.ts b/components/date-picker/inner-popup.component.ts index b24d042bfc..6c862c5be2 100644 --- a/components/date-picker/inner-popup.component.ts +++ b/components/date-picker/inner-popup.component.ts @@ -3,7 +3,6 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -35,8 +34,8 @@ import { PREFIX_CLASS } from './util'; template: `
    - - + @switch (panelMode) { + @case ('decade') { + />
    + />
    -     - + } + @case ('year') { + />
    + />
    -     - + } + @case ('month') { + />
    + />
    -     - - + } + @default { + />
    + />
    -     -     + } + }
    - + @if (showTimePicker && timeOptions) { - - + /> + }
    `, - imports: [NgSwitch, NgSwitchCase, LibPackerModule, NgSwitchDefault, NgIf, NzTimePickerModule, FormsModule], + imports: [LibPackerModule, NzTimePickerModule, FormsModule], standalone: true }) export class InnerPopupComponent implements OnChanges { diff --git a/components/date-picker/lib/abstract-panel-header.html b/components/date-picker/lib/abstract-panel-header.html index fefbdc641a..76fa78098c 100644 --- a/components/date-picker/lib/abstract-panel-header.html +++ b/components/date-picker/lib/abstract-panel-header.html @@ -23,7 +23,7 @@
    - + @for(selector of selectors; track selector) { - + }