wpf datepicker 选择时分秒_[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>

014dcb481c1b8ed5dbe81c5fbff8b6f8.png

可以看到,日期组件的使用非常方便,并且可以在不同环境下使用,不论是双向绑定还是 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);

禁选指定日期 - nzDisabledDate

我们在 待办事项 - Form 篇使用了日期组件,当时我们在选择待办任务预期完成时间时,需要限制用户不得选择今天以前的日期,这是个很普遍的需求,在 nz-date-picker 里也非常容易实现。

它已经为我们提供了 nzDisabledDatenzDisabledTime 属性来限制可供选择的日期和时间,先来看一下这两个属性的定义:

| 参数 | 说明 | 类型 |
| --- | --- | --- |
| nzDisabledTime | 不可选择的时间	 | (current: Date) => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds } |
| nzDisabledDate | 不可选择的日期	 | (current: Date) => boolean |

nzDisabledDate 接受一个返回 boolean 值的方法,而 nzDisabledTime 则返回一个带有时分秒的变量。
看一下我们的使用方式:

<nz-date-picker
    formControlName="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-fns
  return differenceInCalendarDays(current, this.today) < 0;
}

disabledDateTime = (): object => {
  return {
    nzDisabledHours: () => this.range(0, 24).splice(4, 20),
    nzDisabledMinutes: () => this.range(30, 60),
    nzDisabledSeconds: () => [55, 56]
  };
}

我们可以在 nzDisabledDatedisabledDateTime 属性对应的方法中对日期或时间做任何比较操作,然后返回一个 boolean 值来告诉日期组件是否禁用某些时间。

格式化显示 - nzFormat

对于日期组件来说,格式化显示是不可或缺的,毕竟不是任何人都希望组件显示 2019-09-11 12:30:00 这种格式,还记得我无法找到合适的格式化类型,强制使用了讨厌的格式化 MMMMd日 HH:mm 吗?不过仍然不建议加文字在格式化里哈哈,看一下几种常见的格式化的使用方式吧(更多格式可参看 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

对于一些特殊情况,我们希望给予用户特殊的视觉强调,比如选择日期时强调每月第一天(如下图)该怎么做呢?

70769016bd824365d7cce9712d8a5047.png

实际上这非常容易,nz-date-picker 已经为我们准备好了 nzDateRender 属性来自定义日期单元格的内容(month-picker/year-picker不支持喔),它将上下文属性 $implicit 当前日期暴露出来供用户使用,看一下如何使用它:

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

是不是很简单,我们甚至可以在 template 里做一些更多的操作,比如添加特殊日期介绍说明等等。

国际化 i18n

我们在之前项目中已经介绍了如何在 app.module.ts 中配置国际化的方式,那么是否可以在项目里动态切换呢?答案是可行的,NG-ZORRO 的国际化已经提供了运行时动态切换的方法 setLocale

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

724ba9be16445ca2153603375bbd83f9.gif
Tips:有时我们会发现某些版本里(最新版本已经解决),切换一些语言会报如下错误,这种情况可以参考这个 #4080 issue,我们也可以参考之前我们完成的 locale 设定 一部分解决。
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,每个组件又拥有自有的属性,我们在后面遇到的时候也会附带讲解一下,有兴趣的同学可以自行学习这部分的使用方式。

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

084b8faf613230a5ae7596dd2cbede09.png

总结 & 预告

我们今天介绍了 nz-date-picker 日期组件的基本使用方式和几种常见的场景,实现了日期组件的日期范围禁用、自定义模板、动态切换语言等功能,日期 / 时间组件还有不少值得我们关注的属性及使用方法,但是我们第一部分旨在带领大家学习基本的组件知识,每一个属性都去介绍说明显然是不现实的,在后面的项目遇到的话我们会进行介绍,如果大家有兴趣可以去官方网站了解更多的知识和在线示例,想必会有更多的收获。

明天会继续讲解 NG-ZORRO 的另一个组件 Drawer 抽屉组件,感兴趣的同学可以先行查看一下。

相关资料

  • iThelp 文章地址:
[Angular 元件庫 NG-ZORRO 基礎入門] Day 10 - DatePicker - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天​ithelp.ithome.com.tw
f3681d72ea4fb0ef2f801fea576e4e8e.png
  • 今日 github 代码:
simplejason/ng-zorro-ironman2020​github.com
ff3a0abfd7f1380efc7a0f01a6e7066a.png
  • Date 日期组件:
日期选择框 DatePicker - NG-ZORRO​ng.ant.design
  • i18n 国际化设置:
国际化 - NG-ZORRO​ng.ant.design
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值