前言回顧

經(jīng)過(guò)幾天的學(xué)習(xí)，我們完成了 nz-table 相關(guān)知識(shí)的初步了解，當(dāng)然還有很多情況我們沒(méi)有顧及到，有興趣的同學(xué)可以前往官方文檔去查看剩余的示例說(shuō)明。

今天我們繼續(xù)介紹之前項(xiàng)目中涉及的組件：DatePicker。

組件介紹

背景

想必大家對(duì)日期組件絕對(duì)不會(huì)陌生，它在非常多的業(yè)務(wù)場(chǎng)景中被需要，我們今天也會(huì)介紹 nz-date-picker 組件及其相關(guān)組件。
日期類(lèi)組件包括以下四種形式：nz-date-picker：日期選擇組件 nz-month-picker：月份選擇組件nz-range-picker：日期范圍選擇組件 nz-week-picker：周選擇組件

注意： 所有輸入輸出日期對(duì)象均為 Date，你可以通過(guò) date-fns 工具庫(kù)獲得你需要的數(shù)據(jù)。

使用 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>

可以看到，日期組件的使用非常方便，并且可以在不同環(huán)境下使用，不論是雙向綁定還是 Form 組件，還可以通過(guò) nzFormat屬性來(lái)渲染顯示格式，那么我們下面來(lái)看幾個(gè)有意思的例子。

在此之前，需要說(shuō)明的是，nz-date-picker 的部分 locale 來(lái)自于 Angular 自身的國(guó)際化支持，需要在 app.module.ts 文件中 引入相應(yīng)的 Angular 語(yǔ)言包。 例如：

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

禁選指定日期 - nzDisabledDate

我們?cè)?待辦事項(xiàng) - Form 篇使用了日期組件，當(dāng)時(shí)我們?cè)谶x擇待辦任務(wù)預(yù)期完成時(shí)間時(shí)，需要限制用戶(hù)不得選擇今天以前的日期，這是個(gè)很普遍的需求，在 nz-date-picker 里也非常容易實(shí)現(xiàn)。

它已經(jīng)為我們提供了 nzDisabledDate、nzDisabledTime 屬性來(lái)限制可供選擇的日期和時(shí)間，先來(lái)看一下這兩個(gè)屬性的定義：

| 參數(shù) | 說(shuō)明 | 類(lèi)型 | | --- | --- | --- | | nzDisabledTime | 不可選擇的時(shí)間 | (current: Date) => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds } | | nzDisabledDate | 不可選擇的日期 | (current: Date) => boolean |

nzDisabledDate 接受一個(gè)返回 boolean 值的方法，而 nzDisabledTime 則返回一個(gè)帶有時(shí)分秒的變量。
看一下我們的使用方式：

<nz-date-pickerformControlName="deadline"nzFormat="yyyy-MM-dd HH:mm:ss"[nzDisabledTime]="disabledRangeTime"[nzDisabledDate]="disabledDate" ></nz-date-picker>

ts 文件：

disabledDate = (current: Date): boolean => {// Can not select days before today and today, `differenceInCalendarDays` is in date-fnsreturn differenceInCalendarDays(current, this.today) < 0; }disabledDateTime = (): object => {return {nzDisabledHours: () => this.range(0, 24).splice(4, 20),nzDisabledMinutes: () => this.range(30, 60),nzDisabledSeconds: () => [55, 56]}; }

我們可以在 nzDisabledDate、disabledDateTime 屬性對(duì)應(yīng)的方法中對(duì)日期或時(shí)間做任何比較操作，然后返回一個(gè) boolean 值來(lái)告訴日期組件是否禁用某些時(shí)間。

格式化顯示 - nzFormat

對(duì)于日期組件來(lái)說(shuō)，格式化顯示是不可或缺的，畢竟不是任何人都希望組件顯示 2019-09-11 12:30:00 這種格式，還記得我無(wú)法找到合適的格式化類(lèi)型，強(qiáng)制使用了討厭的格式化 MMMMd日 HH:mm 嗎？不過(guò)仍然不建議加文字在格式化里哈哈，看一下幾種常見(jiàn)的格式化的使用方式吧（更多格式可參看 Angular DatePipe）：

<nz-date-picker [(ngModel)]="today" nzFormat="yyyy-MM-dd HH:mm"></nz-date-picker> <nz-date-picker [(ngModel)]="today" nzFormat="dd/MM/yy HH:mm"></nz-date-picker> <nz-date-picker [(ngModel)]="today" nzFormat="EE MM-dd"></nz-date-picker>

自定義日期樣式 - nzDateRender

對(duì)于一些特殊情況，我們希望給予用戶(hù)特殊的視覺(jué)強(qiáng)調(diào)，比如選擇日期時(shí)強(qiáng)調(diào)每月第一天（如下圖）該怎么做呢？

實(shí)際上這非常容易，nz-date-picker 已經(jīng)為我們準(zhǔn)備好了 nzDateRender 屬性來(lái)自定義日期單元格的內(nèi)容（month-picker/year-picker不支持喔），它將上下文屬性 $implicit 當(dāng)前日期暴露出來(lái)供用戶(hù)使用，看一下如何使用它：

<nz-date-picker [nzDateRender]="tplRender"></nz-date-picker> <ng-template #tplRender let-current><div class="ant-calendar-date" [class.first-day]="current.getDate() === 1">{{ current.getDate() }}</div> </ng-template>

是不是很簡(jiǎn)單，我們甚至可以在 template 里做一些更多的操作，比如添加特殊日期介紹說(shuō)明等等。

國(guó)際化 i18n

我們?cè)谥绊?xiàng)目中已經(jīng)介紹了如何在 app.module.ts 中配置國(guó)際化的方式，那么是否可以在項(xiàng)目里動(dòng)態(tài)切換呢？答案是可行的，NG-ZORRO 的國(guó)際化已經(jīng)提供了運(yùn)行時(shí)動(dòng)態(tài)切換的方法 setLocale：

import { en_US, NzI18nService } from 'ng-zorro-antd/i18n'; ... constructor(private i18n: NzI18nService) { } switchLanguage() {this.i18n.setLocale(en_US); }

Tips：有時(shí)我們會(huì)發(fā)現(xiàn)某些版本里（最新版本已經(jīng)解決），切換一些語(yǔ)言會(huì)報(bào)如下錯(cuò)誤，這種情況可以參考這個(gè) #4080 issue，我們也可以參考之前我們完成的 locale 設(shè)定 一部分解決。NzXXXComponent.html:12 ERROR Error: Missing locale data for the locale "zh-cn".at findLocaleData (core.js:28663)at getLocaleId (common.js:974)at getNamedFormat (common.js:1523)...at Object.debugUpdateRenderer [as updateRenderer] (core.js:39399)at checkAndUpdateView (core.js:38382)at callViewAction (core.js:38742)

使用 nz-year-picker / nz-month-picker / nz-week-picker

這些我們就不一一介紹了，它們和 nz-date-picker 擁有 共同的 API，每個(gè)組件又擁有自有的屬性，我們?cè)诤竺嬗龅降臅r(shí)候也會(huì)附帶講解一下，有興趣的同學(xué)可以自行學(xué)習(xí)這部分的使用方式。

<nz-date-picker></nz-date-picker> <nz-month-picker nzPlaceHolder="Select Month"></nz-month-picker> <nz-week-picker nzPlaceHolder="Select Week"></nz-week-picker>

總結(jié) & 預(yù)告

我們今天介紹了 nz-date-picker 日期組件的基本使用方式和幾種常見(jiàn)的場(chǎng)景，實(shí)現(xiàn)了日期組件的日期范圍禁用、自定義模板、動(dòng)態(tài)切換語(yǔ)言等功能，日期 / 時(shí)間組件還有不少值得我們關(guān)注的屬性及使用方法，但是我們第一部分旨在帶領(lǐng)大家學(xué)習(xí)基本的組件知識(shí)，每一個(gè)屬性都去介紹說(shuō)明顯然是不現(xiàn)實(shí)的，在后面的項(xiàng)目遇到的話(huà)我們會(huì)進(jìn)行介紹，如果大家有興趣可以去官方網(wǎng)站了解更多的知識(shí)和在線(xiàn)示例，想必會(huì)有更多的收獲。

明天會(huì)繼續(xù)講解 NG-ZORRO 的另一個(gè)組件 Drawer 抽屜組件，感興趣的同學(xué)可以先行查看一下。

相關(guān)資料

• iThelp 文章地址：

[Angular 元件庫(kù) NG-ZORRO 基礎(chǔ)入門(mén)] Day 10 - DatePicker - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天?ithelp.ithome.com.tw

• 今日 github 代碼：

simplejason/ng-zorro-ironman2020?github.com

• Date 日期組件：

日期選擇框 DatePicker - NG-ZORRO?ng.ant.design

• i18n 國(guó)際化設(shè)置：

國(guó)際化 - NG-ZORRO?ng.ant.design

總結(jié)

以上是生活随笔為你收集整理的wpf datepicker 选择时分秒_[Angular 组件库 NG-ZORRO 基础入门] - DatePicker的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。