前言回顾
经过几天的学习,我们完成了 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>
![4cf1739042c8d7e0fef7e5172b958fd7.png](https://i-blog.csdnimg.cn/blog_migrate/0d29f35d35fc8805d6bdd72774c32a64.jpeg)
可以看到,日期组件的使用非常方便,并且可以在不同环境下使用,不论是双向绑定还是 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);