Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(module:calendar): support only display date of active month #5146

Closed
wants to merge 4 commits into from
Closed

feat(module:calendar): support only display date of active month #5146

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4ec9d13
feat(module:calendar): support only display date of active month
Eve-Sama Apr 25, 2020
c99088f
fix(module:calendar): remove empty row
Eve-Sama Apr 25, 2020
5bcfd93
docs(module:calendar): add direction about nzMonthScope
Eve-Sama Apr 25, 2020
3cc6b07
test: add test for nzMonthScope
Eve-Sama Apr 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions components/calendar/calendar.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ type NzCalendarDateTemplate = TemplateRef<{ $implicit: Date }>;
[activeDate]="activeDate"
[cellRender]="dateCell"
[fullCellRender]="dateFullCell"
[nzMonthScope]="nzMonthScope"
(valueChange)="onDateSelect($event)"
></date-table>
</ng-template>
Expand Down Expand Up @@ -98,6 +99,7 @@ export class NzCalendarComponent implements ControlValueAccessor, OnChanges {

@Input() nzMode: NzCalendarMode = 'month';
@Input() nzValue: Date;
@Input() nzMonthScope = false;

@Output() readonly nzModeChange: EventEmitter<NzCalendarMode> = new EventEmitter();
@Output() readonly nzPanelChange: EventEmitter<{ date: Date; mode: NzCalendarMode }> = new EventEmitter();
Expand Down
1 change: 1 addition & 0 deletions components/calendar/doc/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,4 +52,5 @@ registerLocaleData(en);
| `[nzDateFullCell]` | (Contentable) Customize the display of the date cell, the template content will override the cell | `TemplateRef<Date>` | - |
| `[nzMonthCell]` | (Contentable) Customize the display of the month cell, the template content will be appended to the cell | `TemplateRef<Date>` | - |
| `[nzMonthFullCell]` | (Contentable) Customize the display of the month cell, the template content will override the cell | `TemplateRef<Date>` | - |
| `[nzMonthScope]` | Only display date of the active month | `boolean` | `false` |
| `(nzPanelChange)` | Callback for when panel changes | `EventEmitter<{ date: Date, mode: 'month' \| 'year' }>` | - |
1 change: 1 addition & 0 deletions components/calendar/doc/index.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,5 +52,6 @@ registerLocaleData(zh);
| `[nzDateFullCell]` | （可作为内容）自定义渲染日期单元格，模版内容覆盖单元格 | `TemplateRef<Date>` | - |
| `[nzMonthCell]` | （可作为内容）自定义渲染月单元格，模版内容会被追加到单元格 | `TemplateRef<Date>` | - |
| `[nzMonthFullCell]` | （可作为内容）自定义渲染月单元格，模版内容覆盖单元格 | `TemplateRef<Date>` | - |
| `[nzMonthScope]` | 是否只显示当前月份的日期 | `boolean` | `false` |
| `(nzPanelChange)` | 面板变化的回调 | `EventEmitter<{ date: Date, mode: 'month' \| 'year' }>` | - |
| `(nzSelectChange)` | 选择日期的回调 | `EventEmitter<Date>` | - |
15 changes: 15 additions & 0 deletions components/date-picker/lib/date-table.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export class DateTableComponent extends AbstractTable implements OnChanges, OnIn
@Input() locale: NzCalendarI18nInterface;
@Input() selectedValue: CandyDate[]; // Range ONLY
@Input() hoverValue: CandyDate[]; // Range ONLY
@Input() nzMonthScope = false;

@Output() readonly dayHover = new EventEmitter<CandyDate>(); // Emitted when hover on a day by mouse enter

Expand Down Expand Up @@ -225,6 +226,20 @@ export class DateTableComponent extends AbstractTable implements OnChanges, OnIn
weekRows.push(row);
}

if (this.nzMonthScope) {
const allDateCell: DateCell[] = [];
weekRows.forEach(row => {
const rowCells = row.dateCells.filter(cell => cell.value.getMonth() === this.activeDate.getMonth());
allDateCell.push(...rowCells);
});
weekRows.forEach(v => {
v.dateCells = allDateCell.splice(0, 7);
});
// delete empty row
if (weekRows[weekRows.length - 1].dateCells.length === 0) {
weekRows.pop();
}
}
return weekRows;
}

Expand Down