NG-ALAIN- CURD
st 表格 sv 查看 se 编辑 cell 单元格数据 sf 动态表单 LIB
- 基础
hotkey 热键 let 定义 media HTML5媒体 reuse-tab 路由复用标签 loading 加载指示符 pdf Pdf qr 二维码 lodop Lodop打印 xlsx Excel 操作 Observers 观察者 onboarding 用户引导流程 zip Zip 操作 图表 G2 LIB avatar-list 用户头像列表 count-down 倒计时 down-file 下载文件 主题系统 LIB 工具集 LIB
- 表单
range-picker 日期范围 error-collect 表单异常消息采集器
- 布局
sg 简易栅格 ellipsis 文本自动省略号 exception 异常 footer-toolbar 底部工具栏 full-content 全屏工作区 global-footer 全局页脚 page-header 页头 result 处理结果 tag-select 标签选择器
- 业务
用户认证 LIB notice-icon 通知菜单 quick-menu 快速菜单 访问控制列表 LIB 缓存 LIB Mock模拟数据 LIB
- 其它
auto-focus 自动获得焦点 highlight 高亮
基于 nz-range-picker 进一步优化，更好的服务于开始与结束日期。
代码演示
使用 ngModel、ngModelEnd 来表示开始与结束值。
import { JsonPipe } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RangePickerDirective } from '@delon/abc/date-picker';
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
@Component({
selector: 'components-date-picker-basic',
template: `
result: {{ i | json }}<br />
<nz-range-picker [(ngModel)]="i.start" extend [(ngModelEnd)]="i.end" />
`,
standalone: true,
imports: [JsonPipe, FormsModule, NzDatePickerModule, RangePickerDirective]
})
export class ComponentsDatePickerBasicComponent {
i: { start?: Date; end?: Date } = {};
}使用 shortcuts 自定义快捷面板（支持全局配置）。
import { JsonPipe } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RangePickerDirective } from '@delon/abc/date-picker';
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
@Component({
selector: 'components-date-picker-shortcut',
template: `
result: {{ i | json }}<br />
<nz-range-picker [(ngModel)]="i.start" extend [(ngModelEnd)]="i.end" shortcut />
`,
standalone: true,
imports: [JsonPipe, FormsModule, NzDatePickerModule, RangePickerDirective]
})
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, DateRangePickerShortcut | false | ✅ |
DateRangePickerShortcut
| 成员 | 说明 | 类型 | 默认值 |
|---|---|---|---|
[enabled] | 是否启用 | boolean | false |
[closed] | 是否点击后立即关闭面板 | boolean | true |
[enabled] | 快捷列表 | DateRangePickerShortcutItem[] | 今天,昨天,近3天,近7天,本周,本月,全年 |