Date

To select or input a date.

Notice

  • 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:

    • date-time default is yyyy-MM-ddTHH:mm:ssZ

    • date, full-date default is yyyy-MM-dd

    • time, full-time default is HH:mm:ss

    • Non-standard: week default is yyyy-ww

    • Non-standard: month default is yyyy-MM

  • 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 yyyy-MM-dd HH:mm:ss

    • number default is T 13-bit Unix Timestamp

Examples

Basic Usage

Simplest of usage.

expand codeexpand code
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,
      },
      inline: {
        type: 'string',
        ui: { widget: 'date', inline: true } as SFDateWidgetSchema,
      },
    },
  };

  constructor(private msg: NzMessageService) {}

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

  change(value: {}): void {
    console.log('change', value);
  }
}
Data Range

A simple start & end date range, Note: end still needs define in schema, but will forced to be hidden.

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

@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: 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'],
  };

  constructor(private msg: NzMessageService) {}

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

API

schema

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

ui

PropertyDescriptionTypeDefault
[mode]Render modedate,week,month,yeardate
[rangeMode]Set picker mode of range pickerdate,week,month,yeardate
[size]Size of the nz-date-pickerdefault,large,small-
[placeholder]Placeholder of date inputstring-
[displayFormat]Display format(nzFormat)stringyyyy-MM-dd HH:mm:ss
[end]End key value for the date rangestring-
[allowClear]Whether to show clear buttonbooleantrue
[className]Picker classNamestring-
[disabledDate]specify the date that cannot be selected(current: Date) => boolean-
[locale]localization configurationobject-
[popupStyle]to customize the style of the popup calendarobject-
[dropdownClassName]to customize the className of the popup calendarstring-
[onOpenChange]a callback emitter, can be executed whether the popup calendar is popped up or closed(status: boolean) => void-
[disabledTime]to specify the time that cannot be selected(current: Date) => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds }-
[renderExtraFooter]render extra footer in panelstring-
[showTime]to provide an additional time selection, the object type is TimePickerOptionsobject,booleantrue
[showToday]whether to show "Today" buttonbooleantrue
[inputReadOnly]Set the readonly attribute of the input tag (avoids virtual keyboard on touch devices)booleanfalse
[inline]Inline mode of the date pickerbooleanfalse
[onOk]callback when click ok button(data: Date | Date[]) => void-
[change]Date change callback(data: Date | Date[]) => void-