date 日期

输入或选择日期的控件。

注意事项

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

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

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

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

  • date、full-date 默认 yyyy-MM-dd

  • time、full-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

代码演示

基础样例

最简单的用法。

import { Component } from '@angular/core';
import { SFDateWidgetSchema, SFSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
  selector: 'form-date-simple',
  template: ` <sf [schema]="schema" (formSubmit)="submit($event)" (formChange)="change($event)"></sf> `,
})
export class FormDateSimpleComponent {
  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,
      },
    },
  };
  constructor(public msg: NzMessageService) {}
  submit(value: any) {
    this.msg.success(JSON.stringify(value));
  }
  change(value: {}) {
    console.log('change', value);
  }
}

范围

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

import { Component } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { SFSchema, SFDateWidgetSchema } from '@delon/form';
@Component({
  selector: 'form-date-range',
  template: `
    <sf [schema]="schema" (formSubmit)="submit($event)"></sf>
  `,
})
export class FormDateRangeComponent {
  schema: SFSchema = {
    properties: {
      start: {
        type: 'string',
        ui: { widget: 'date', end: 'end' } as SFDateWidgetSchema,
        default: new Date(),
      },
      end: {
        type: 'string',
        default: '2119-1-1',
      },
    },
    required: ['start'],
  };
  constructor(private msg: NzMessageService) {}
  submit(value: any) {
    this.msg.success(JSON.stringify(value));
  }
}

API

schema 属性

ui 属性