时间

输入或选择时间的控件。

如何使用

非内置模块,需要额外在 json-schema 注册 withTimeWidget

注意事项

  • 格式化分为:数据格式化表示表单数据和显示格式化显示数据(等同 nzFormat 值)

  • 所有 数据格式化 单位,参考 date-fns format(国内镜像:moment format

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

    • timefull-time 默认 HH:mm:ss

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

    • string 默认 HH:mm:ss

    • number 默认 T 13位 Unix Timestamp

  • 由于 disabledHoursdisabledMinutesdisabledSeconds 组合导致时间格式被破坏,可能会导致无法正常显示或显示不正确时可以指定一个完整的 Date 对象给默认值(schema.defaultformData

代码演示

基础样例

最简单的用法。

expand code expand code
import { Component, inject } from '@angular/core';

import { YelonFormModule, SFSchema } from '@yelon/form';
import type { SFTimeWidgetSchema } from '@yelon/form/widgets/time';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'form-time-simple',
  template: ` <sf [schema]="schema" (formSubmit)="submit($event)" />`,
  standalone: true,
  imports: [YelonFormModule]
})
export class FormTimeSimpleComponent {
  private readonly msg = inject(NzMessageService);
  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
      }
    }
  };

  submit(value: {}): void {
    this.msg.success(JSON.stringify(value));
  }
}

API

schema属性

成员说明类型默认值
[readOnly]禁用状态boolean-
[format]数据格式类型string-

ui属性

成员说明类型默认值
[size]大小,等同 nzSizestring-
[placeholder]在文字框中显示提示讯息string-
[format]数据格式化stringHH:mm:ss
[displayFormat]显示格式化,(等同 nzFormat 值)stringHH:mm:ss
[utcEpoch]是否UTC新纪元(表示从 1970 开始计毫秒数),当 type='number' 时有效booleanfalse
[allowEmpty]是否展示清除按钮booleantrue
[clearText]清除按钮的提示文案string清除
[defaultOpenValue]设置面板打开时默认选中的值Datenew Date()
[disabledHours]禁止选择部分小时选项() => number[]-
[disabledMinutes]禁止选择部分分钟选项(hour: number) => number[]-
[disabledSeconds]禁止选择部分秒选项(hour: number, minute: number) => number[]-
[hideDisabledOptions]隐藏禁止选择的选项booleanfalse
[hourStep]小时选项间隔number1
[minuteStep]分钟选项间隔number1
[secondStep]秒选项间隔number1
[popupClassName]弹出层类名string-
[change]时间发生变化的回调(value: Date) => void-
[openChange]面板打开/关闭时的回调(status: boolean) => void-
[nowText]此刻按钮文本string-
[okText]确认按钮文本string-
Loading...