日期

输入或选择日期的控件。

注意事项

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

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

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

    • date-time 默认 yyyy-MM-DDTHH:mm:ssZ,注意这里采用的是 type="datetime-local" 因此会涉及到时区问题

    • datefull-date 默认 yyyy-MM-dd

    • timefull-time 默认 HH:mm:ss

    • 非标准:week 默认 yyyy-ww

    • 非标准:month 默认 yyyy-MM

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

    • string 默认 yyyy-MM-dd HH:mm:ss

    • number 默认 T 13位Unix Timestamp

代码演示

基础样例

最简单的用法。

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

import { YelonFormModule, SFDateWidgetSchema, SFSchema } from '@yelon/form';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'form-date-simple',
  template: ` <sf [schema]="schema" (formSubmit)="submit($event)" (formChange)="change($event)" /> `,
  standalone: true,
  imports: [YelonFormModule]
})
export class FormDateSimpleComponent {
  private readonly msg = inject(NzMessageService);
  schema: SFSchema = {
    properties: {
      datetime: {
        type: 'string',
        format: 'date-time'
      },
      date: {
        type: 'string',
        format: 'date'
      },
      date_number: {
        type: 'number',
        ui: { widget: 'date' } as SFDateWidgetSchema
      },
      year: {
        type: 'number',
        ui: { widget: 'date', mode: 'year', format: 'yyyy' } as SFDateWidgetSchema
      },
      month: {
        type: 'string',
        format: 'month'
      },
      week: {
        type: 'string',
        format: 'week'
      },
      range: {
        type: 'string',
        ui: { widget: 'date', mode: 'range' } as SFDateWidgetSchema
      },
      start: {
        type: 'string',
        ui: { widget: 'date', end: 'end' } as SFDateWidgetSchema
      },
      end: {
        type: 'string',
        ui: { widget: 'date', end: 'end' } as SFDateWidgetSchema
      },
      inline: {
        type: 'string',
        ui: { widget: 'date', inline: true } as SFDateWidgetSchema
      }
    }
  };

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

  change(value: {}): void {
    console.log('change', value);
  }
}
范围

一个简单的开始与结束日期,注意: end 依然需要定义对应的Schema,但会强制隐藏状态。

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

import { subWeeks } from 'date-fns';

import { YelonFormModule, SFDateWidgetSchema, SFSchema } from '@yelon/form';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'form-date-range',
  template: ` <sf [schema]="schema" (formSubmit)="submit($event)" /> `,
  standalone: true,
  imports: [YelonFormModule]
})
export class FormDateRangeComponent {
  private readonly msg = inject(NzMessageService);
  schema: SFSchema = {
    properties: {
      start: {
        type: 'string',
        ui: { widget: 'date', end: 'end', separator: '到' } as SFDateWidgetSchema,
        default: new Date()
      },
      end: {
        type: 'string',
        default: subWeeks(new Date(), 6)
      },
      startWeek: {
        type: 'string',
        ui: { widget: 'date', rangeMode: 'week', end: 'endWeek' } as SFDateWidgetSchema,
        default: new Date()
      },
      endWeek: {
        type: 'string',
        default: subWeeks(new Date(), 6)
      },
      startMonth: {
        type: 'string',
        ui: { widget: 'date', rangeMode: 'month', end: 'endMonth' } as SFDateWidgetSchema,
        default: new Date()
      },
      endMonth: {
        type: 'string',
        default: subWeeks(new Date(), 6)
      },
      startYear: {
        type: 'string',
        ui: { widget: 'date', rangeMode: 'year', end: 'endYear' } as SFDateWidgetSchema,
        default: new Date()
      },
      endYear: {
        type: 'string',
        default: subWeeks(new Date(), 6)
      }
    },
    required: ['start']
  };

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

API

schema属性

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

ui属性

参数说明类型默认值
[mode]渲染模式date,week,month,yeardate
[rangeMode]范围选择器的选择模式date,week,month,yeardate
[size]大小,等同 nzSizedefault,large,small-
[placeholder]在文字框中显示提示讯息string-
[format]数据格式化string-
[displayFormat]显示格式化,(等同 nzFormat 值)stringyyyy-MM-dd HH:mm:ss
[end]日期范围所对应的结束值 keystring-
[allowClear]是否显示清除按钮booleantrue
[className]选择器 classNamestring-
[locale]国际化配置object-
[popupStyle]额外的弹出日历样式object-
[dropdownClassName]额外的弹出日历 classNamestring-
[onOpenChange]弹出日历和关闭日历的回调(status: boolean) => void-
[disabledDate]不可选择的日期(current: Date) => boolean-
[disabledTime]不可选择的时间(current: Date) => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds }-
[renderExtraFooter]在面板中添加额外的页脚string-
[showTime]增加时间选择功能,object 类型为 TimePickerOptionsobject,booleantrue
[showToday]是否展示“今天”按钮booleantrue
[inputReadOnly]为 input 标签设置只读属性(避免在移动设备上触发小键盘)booleanfalse
[inline]内联模式booleanfalse
[separator]分隔符string, TemplateRef'~'
[showWeekNumber]是否在每一行显示周数(仅日期选择器支持。周选择器始终显示周数)booleanfalse
[onOk]点击确定按钮的回调(data: Date | Date[]) => void-
[change]时间发生变化的回调(data: Date | Date[]) => void-
Loading...