ng-alain 的动态表单使用时间选择，增加快捷选择时间段

我们的一些表单时间选择，如果能增加快捷选择方式，是一个用户体验提升的方式。 效果如图

1. Ng-alain 中的动态表单，日期组件里虽然有一个属性 renderExtraFooter （在面板中添加额外的页脚），但是这个仅仅支持字符串。

我们的需求里是不能使用单纯的字符串的，这无法实现点击时间段然后快捷输入日期的。

2. Ng-zorro 的日期选择框(DatePicker) | NG-ZORRO (ant.design)，里面有一个示例：预设范围。这个功能能满足我们的需求。

3. 既然找到有现成的组件，我们就可以利用 Ng-alain 表单中的自定义组件功能，使用 Ng-zorro 的日期选择组件。

以下我只写一下主要代码部分

// index.ts
  import { format, subDays, subMonths, differenceInCalendarDays, endOfMonth } from 'date-fns';

  ranges = {
    今天: [new Date(), new Date()],
    近一天: [subDays(new Date(), 1), new Date()],
    近三天: [subDays(new Date(), 2), new Date()],
    近七天: [subDays(new Date(), 6), new Date()],
    近半月: [subDays(new Date(), 14), new Date()],
    近一月: [subMonths(new Date(), 1), new Date()]
  };
  dateRange = [new Date(), new Date()];
  
  
  /**
   * 时间选择切换事件处理
   *
   * 给表单的隐藏字段赋值
   * @param result
   */
  onChange(result: Date[]): void {
    this._sfSearch.setValue('/start', format(result[0], 'yyyy-MM-dd 00:00:00'));
    this._sfSearch.setValue('/end', format(result[1], 'yyyy-MM-dd 23:59:59'));
  }
  
// index.html
<sf>
<ng-template sf-template="quick" let-i let-ui="ui" let-schema="schema">
    <nz-range-picker [nzRanges]="ranges" [(ngModel)]="dateRange" (ngModelChange)="onChange($event)"></nz-range-picker>
</ng-template>
</sf>
  

以上，就是我的分享内容，希望对大家有帮助。