Data Range
IMPORT MODULE

Based on the nz-range-picker further optimization, better service to start and end dates.

Examples

result: {}
Basic

Start and end values with ngModel, ngModelEnd.

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: {}
Shortcut

Use shortcuts to customize the shortcut panel (supports global configuration).

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

It needs to be used with nz-range-picker, for example:

<nz-range-picker [(ngModel)]="i.start" extend [(ngModelEnd)]="i.end"></nz-range-picker>
PropertyDescriptionTypeDefaultGlobal Config
[(ngModelEnd)]End date, start and end values at the same timeDate-
[shortcut]Set shortcutsboolean | DateRangePickerShortcutfalse

DateRangePickerShortcut

PropertyDescriptionTypeDefault
[enabled]Whether to enablebooleanfalse
[closed]Whether to close the panel after clickingbooleantrue
[enabled]Shortcut listDateRangePickerShortcutItem[]今天,昨天,近3天,近7天,本周,本月,全年