时分秒 时间组件_[Angular 组件库 NG-ZORRO 基础入门] - DatePicker

前言回顾

经过几天的学习，我们完成了 nz-table 相关知识的初步了解，当然还有很多情况我们没有顾及到，有兴趣的同学可以前往官方文档去查看剩余的示例说明。

今天我们继续介绍之前项目中涉及的组件：DatePicker。

组件介绍

背景

想必大家对日期组件绝对不会陌生，它在非常多的业务场景中被需要，我们今天也会介绍 nz-date-picker 组件及其相关组件。
日期类组件包括以下四种形式：nz-date-picker：日期选择组件 nz-month-picker：月份选择组件nz-range-picker：日期范围选择组件 nz-week-picker：周选择组件

注意： 所有输入输出日期对象均为 Date，你可以通过 date-fns 工具库获得你需要的数据。

使用 nz-date-picker

<nz-date-picker></nz-date-picker>
<nz-date-picker [(ngModel)]="today"></nz-date-picker>
<nz-date-picker formControlName="today" nzFormat="yyyy-MM-dd"></nz-date-picker>

可以看到，日期组件的使用非常方便，并且可以在不同环境下使用，不论是双向绑定还是 Form 组件，还可以通过 nzFormat属性来渲染显示格式，那么我们下面来看几个有意思的例子。

在此之前，需要说明的是，nz-date-picker 的部分 locale 来自于 Angular 自身的国际化支持，需要在 app.module.ts 文件中 引入相应的 Angular 语言包。 例如：

import {
     registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
registerLocaleData(zh);