datetime Type

type DatetimeField = {
  label: string
  name: string
  type: 'string'
  list?: boolean
  // See https://tina.io/docs/extending-tina/overview/ for customizing the UI
  ui?: {
    dateFormat: string // eg 'YYYY MM DD'
    label?: string
    description?: string
    component?: FC<any> | string | null
    parse?: (value: string, name: string, field: F) => any
    format?: (value: string, name: string, field: F) => any
    validate?(
      value: string,
      allValues: any,
      meta: any,
      field: UIField<F, Shape>
    ): string | undefined | void
  }
}

The return value for a datetime is in ISO string format

Examples

Tina will generate the appropriate component depending on the configuration provided.

Simple

{
  type: 'datetime',
  name: 'date',
  label: 'Date'
}

Custom Format

You can customize the format that the date field use by customizing the dateFormat & parse properties.

{
  label: "Date",
  name: "date",
  type: "datetime",
      ui: {
    dateFormat: 'YY-MM-DD',
      parse: (value) => value && value.format('YY-MM-DD'),
  },
}

Using a Time Picker

You can add a timepicker to the date UI by supplying the ui.timeFormat property

{
  label: "Date",
  name: "date",
  type: "datetime",
      ui: {
    timeFormat: "HH:mm"
  },
}

Last Edited: September 12, 2024