time 时间

输入或选择时间的控件。

注意事项

• 格式化分为：数据格式化表示表单数据和显示格式化显示数据（等同 nzFormat 值）

• 所有 数据格式化 单位，参考 date-fns format（国内镜像：moment format）

• 指定 schema.format 则必须遵守 RFC3339 时间格式，否则都视为格式错误，默认的数据格式化：

  • time、full-time 默认 HH:mm:ss

• 不指定 schema.format 根据 schema.type 值按以下规则处理（允许通过全局配置替换）数据格式化：

  • string 默认 HH:mm:ss

  • number 默认 T 13位 Unix Timestamp

• 由于 disabledHours、disabledMinutes、disabledSeconds 组合导致时间格式被破坏，可能会导致无法正常显示或显示不正确时可以指定一个完整的 Date 对象给默认值（schema.default 或 formData）

代码演示

基础样例

最简单的用法。

import { Component } from '@angular/core';
import { SFSchema, SFTimeWidgetSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
  selector: 'form-time-simple',
  template: `
    <sf [schema]="schema" (formSubmit)="submit($event)"></sf>
  `,
})
export class FormTimeSimpleComponent {
  schema: SFSchema = {
    properties: {
      time: {
        type: 'string',
        ui: { widget: 'time' } as SFTimeWidgetSchema,
      },
      time_number: {
        type: 'number',
        ui: { widget: 'time' } as SFTimeWidgetSchema,
      },
      time_format: {
        type: 'string',
        format: 'time',
        ui: {
          format: `HH:mm:ss+00:00`,
        } as SFTimeWidgetSchema,
      },
      '12hours': {
        type: 'string',
        ui: {
          widget: 'time',
          format: 'h:mm:ss a',
          use12Hours: true,
        } as SFTimeWidgetSchema,
      },
    },
  };
  constructor(private msg: NzMessageService) {}
  submit(value: any) {
    this.msg.success(JSON.stringify(value));
  }
}

API

schema 属性

ui 属性