日期范围
IMPORT MODULE

基于 nz-range-picker 进一步优化,更好的服务于开始与结束日期。

代码演示

result: {}
基础

使用 ngModelngModelEnd 来表示开始与结束值。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-date-picker-basic',
  template: `
    result: {{ i | json }}<br />
    <nz-range-picker [(ngModel)]="i.start" extend [(ngModelEnd)]="i.end"></nz-range-picker>
  `,
})
export class ComponentsDatePickerBasicComponent {
  i: { start?: Date; end?: Date } = {};
}
result: {}
快捷键

使用 shortcuts 自定义快捷面板(支持全局配置)。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-date-picker-shortcut',
  template: `
    result: {{ i | json }}<br />
    <nz-range-picker [(ngModel)]="i.start" extend [(ngModelEnd)]="i.end" shortcut></nz-range-picker>
  `,
})
export class ComponentsDatePickerShortcutComponent {
  i: { start?: Date; end?: Date } = {};
}

API

extend

需要配合 nz-range-picker 一起使用,例如:

<nz-range-picker [(ngModel)]="i.start" extend [(ngModelEnd)]="i.end"></nz-range-picker>
成员说明类型默认值全局配置
[(ngModelEnd)]结束日期,开始与结束同时有值才会生效Date-
[shortcut]设置快捷键boolean, DateRangePickerShortcutfalse

DateRangePickerShortcut

成员说明类型默认值
[enabled]是否启用booleanfalse
[closed]是否点击后立即关闭面板booleantrue
[enabled]快捷列表DateRangePickerShortcutItem[]今天,昨天,近3天,近7天,本周,本月,全年