range-picker 日期范围
- 代码演示
- API
  - range-picker
  - DateRangePickerShortcut

range-picker 日期范围

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

import { DataRangeModule } from '@delon/abc/date-picker';

代码演示

基础

使用 ngModel、ngModelEnd 来表示开始与结束值。

import { Component } from '@angular/core';
@Component({
  selector: 'components-date-picker-basic',
  template: `
  result: {{i | json}}<br>
  <range-picker [(ngModel)]="i.start" [(ngModelEnd)]="i.end"></range-picker>
  `,
})
export class ComponentsDatePickerBasicComponent {
  i: any = {};
}

快捷键

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

import { Component } from '@angular/core';
@Component({
  selector: 'components-date-picker-shortcut',
  template: `
  result: {{i | json}}<br>
  <range-picker [(ngModel)]="i.start" [(ngModelEnd)]="i.end" [shortcut]="true"></range-picker>
  `,
})
export class ComponentsDatePickerShortcutComponent {
  i: any = {};
}

API

range-picker

成员	说明	类型	默认值	全局配置
`[(ngModel)]`	开始日期，开始与结束同时有值才会生效	`Date`	-
`[(ngModelEnd)]`	结束日期，开始与结束同时有值才会生效	`Date`	-
`[shortcut]`	设置快捷键	`boolean, DateRangePickerShortcut`	`false`	✅
`[nzAllowClear]`	是否显示清除按钮	`boolean`	`true`	✅
`[nzAutoFocus]`	自动获取焦点	`boolean`	`false`	✅
`[nzClassName]`	选择器 className	`string`	`‘’`	✅
`[nzDateRender]`	自定义日期单元格的内容（month-picker/year-picker不支持）	`TemplateRef<Date>\|string\|((d: Date) => TemplateRef｜string)`	-
`[nzDisabled]`	禁用	`boolean`	`false`
`[nzDisabledDate]`	不可选择的日期（year-picker不支持）	`(current: Date) => boolean`	-	✅
`[nzLocale]`	国际化配置	`object`	默认配置
`[nzOpen]`	控制弹层是否展开	`boolean`	-
`[nzPopupStyle]`	额外的弹出日历样式	`object`	`{}`	✅
`[nzDropdownClassName]`	额外的弹出日历 className	`string`	-	✅
`[nzSize]`	输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px	`‘large’｜’small’`	-	✅
`[nzStyle]`	自定义输入框样式	`object`	`{}`	✅
`[nzDisabledTime]`	不可选择的时间	`(current: Date, partial: ‘start’｜’end’) => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds }`	-	✅
`[nzFormat]`	展示的日期格式	`string`	`“yyyy-MM-dd”`	✅
`[nzRanges]`	预设时间范围快捷选择	`{ [ key: string ]: Date[] }`	-	✅
`[nzRenderExtraFooter]`	在面板中添加额外的页脚	`TemplateRef｜string｜(() => TemplateRef｜string)`	-
`[nzShowTime]`	增加时间选择功能	`object｜boolean`	TimePicker Options	✅
`[nzPlaceHolder]`	输入框提示文字	`string[]`	-
`(nzOnOk)`	点击确定按钮的回调	`EventEmitter<Date[]>`	-
`(nzOnOpenChange)`	弹出和关闭的回调	`EventEmitter<boolean>`	-

支持 nz-range-picker 的所有属性。

DateRangePickerShortcut

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