Calendar日历

    当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。

    想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

    一个通用的日历面板，支持年/月切换。

    3. @Component({
    4.   selector: 'nz-demo-calendar-basic',
    5.   template: `
    6.     <nz-calendar [(ngModel)]="date" [(nzMode)]="mode" (nzPanelChange)="panelChange($event)"></nz-calendar>
    7.   `
    8. })
    9. export class NzDemoCalendarBasicComponent {
    10.   date = new Date(2012, 11, 21);
    12.   panelChange(change: { date: Date; mode: string }): void {
    13.     console.log(change.date, change.mode);
    14.   }
    15. }

    通知事项日历

    一个复杂的应用示例，用 dateCell 和 monthCell 模版来自定义需要渲染的数据。

    Calendar日历 - 图3

    用于嵌套在空间有限的容器中。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-calendar-card',
    6.     <div [ngStyle]="{ width: '300px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
    7.       <nz-calendar
    8.         nzCard
    9.         (nzSelectChange)="onValueChange($event)"
    10.         (nzPanelChange)="onPanelChange($event)"
    11.     </div>
    12.   `
    13. })
    14. export class NzDemoCalendarCardComponent {
    15.   onValueChange(value: Date): void {
    16.     console.log(`Current value: ${value}`);
    17.   }
    19.   onPanelChange(change: { date: Date; mode: string }): void {
    20.     console.log(`Current value: ${change.date}`);
    21.     console.log(`Current mode: ${change.mode}`);
    22.   }
    23. }

    选择功能

    一个通用的日历面板，支持年/月切换。

    注意：Calendar 的部分 locale 来自于 Angular 自身的国际化支持，需要在 app.module.ts 文件中 引入相应的 Angular 语言包。

    1. import { registerLocaleData } from '@angular/common';
    2. import zh from '@angular/common/locales/zh';