To select/input a time.


  • Format is divided into two types: Data format means form data, Display format means display data (nzFormat)

  • All Data format units, reference date-fns format (China mirror: moment format)

  • Specify schema.format must follow RFC3339 time format, otherwise considered as a format error, default rules:

    • timefull-time default is HH:mm:ss

  • When schema.format is not specified, the data formatting (Allows you to reassign default values via Global Configuration) is determined by the schema.type type:

    • string default is HH:mm:ss

    • number default is T 13-bit Unix Timestamp

  • Since disabledHours, disabledMinutes, disabledSeconds will cause the time format to be corrupted, it may cause the display format error. The solution is specify a complete Date object in the default value (schema.default or formData)


Basic Usage

Simplest of usage.

expand codeexpand code
import { Component } from '@angular/core';
import { SFSchema, SFTimeWidgetSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';

  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: {}): void {



[readOnly]Whether to disable the stateboolean-
[format]Data format typestring-


[size]Size of the nz-date-pickerstring-
[placeholder]Placeholder of date inputstring-
[displayFormat]Display format(nzFormat)stringyyyy-MM-dd HH:mm:ss
[utcEpoch]Whether UTC (represents the number of milliseconds from 1970)booleanfalse
[allowEmpty]allow clearing textbooleantrue
[clearText]clear tooltip of iconstring清除
[defaultOpenValue]default open panel valueDatenew Date()
[disabledHours]to specify the hours that cannot be selected() => number[]-
[disabledMinutes]to specify the minutes that cannot be selected(hour: number) => number[]-
[disabledSeconds]to specify the seconds that cannot be selected(hour: number, minute: number) => number[]-
[hideDisabledOptions]hide the options that can not be selectedbooleanfalse
[hourStep]interval between hours in pickernumber1
[minuteStep]interval between minutes in pickernumber1
[secondStep]interval between seconds in pickernumber1
[popupClassName]className of panelstring-
[change]a callback function, can be executed when the selected time is changing(value: Date) => void-
[openChange]a callback function which will be called while panel opening/closing(status: boolean) => void-
[nowText]text of the Now buttonstring-
[okText]text of the Ok buttonstring-